州政府没有更新.我正在try 创建编辑功能,以便对发布的 comments 进行编辑.当单击提交按钮时,前端不会发生任何变化.在我刷新页面后,更改会出现.我似乎找不到问题出在哪里.

Content.js

// handle edit comments
    const editChat = (newComment) => {
        const updatedChatList = chats.map(chat => {
            if (topic.id === newComment.id) {
                return newComment
            } else {
                return chat;
            }
        });
        setChats(updatedChatList);
    }

ChatCard.js

function ChatCard({ chat, topic, deleteComment, editChat }) {
    const { user } = useContext(UserContext);
    const { id } = chat;
    const [editMode, setEditMode] = useState(false);
    // const openEditMode = () => setEditMode(editMode => !editMode);

    const deleteClick = () => {
        fetch(`/topics/${topic.id}/chats/${id}`, {
            method: "DELETE",
        })
        deleteComment(id)
    }

    return (
        <div>
            <ul>
                <p><strong>{ chat.user.username }:</strong> { chat.content }</p>
            </ul>
            {user && user.username === chat.user.username && (
                <div className="chat-btn">
                <button className="delete-btn" onClick={deleteClick}>Delete</button>
                <button className="edit-btn" onClick={() => setEditMode(editMode => !editMode)}>Edit</button>
                </div>
            )}
            { editMode && <ChatEdit chat={chat} topic={topic} editChat={editChat} editMode={editMode} setEditMode={setEditMode} /> }
        </div>
    )
}

ChatEdit.js

import { useState, useContext } from "react";
import { ErrorsContext } from "../context/ErrorsContext";
import Errors from "../errors/Errors";

function ChatEdit({ chat, topic, editChat, editMode, setEditMode }) {
    const { setErrors } = useContext(ErrorsContext);
    const [content, setContent] = useState(chat.content);

    const handleSubmit = (e) => {
        e.preventDefault();
        const editComment = {
            content: content
        }
        fetch(`/topics/${topic.id}/chats/${chat.id}`, {
            method: "PATCH",
            headers: { 
                "Accept": "application/json",
                "Content-Type": "application/json" 
            },
            body: JSON.stringify(editComment)
        })
        .then(resp => resp.json())
        .then(data => {
            if (data.errors) {
                setErrors(data.errors)
            } else {
                editChat(data)
                setErrors([])
                setEditMode(!editMode)
            }
        })
    }

    return (
        <form className="post-form" onSubmit={handleSubmit}>
            <div className="new-post">
            <textarea className="chat-textarea" type="text" name="content" placeholder="Write your comment." value={content} onChange={(e) => setContent(e.target.value)} /><br/>
            <button type="submit">SEND</button>
            </div>
            <Errors />
        </form>
    )
}

export default ChatEdit;

我正在try 让编辑后的 comments 在我提交表格后更新.它正在更新,但在我刷新屏幕之前不会更新.

推荐答案

这个问题看起来可能与您如何更新Content.js组件中的聊天状态有关.

目前,在editChat函数中,您将在Chats数组上进行映射,以查找具有匹配id的 comments ,并使用newComment更新它.然而,在您的映射函数中,您将topic.id与newComment.id进行比较,这似乎是不正确的.应该是chat.id.

要解决此问题,您可以按如下方式修改editChat函数:

const editChat = (newComment) => {
  const updatedChatList = chats.map(chat => {
    if (chat.id === newComment.id) { // Compare chat.id with newComment.id
      return newComment;
    } else {
      return chat;
    }
  });
  setChats(updatedChatList);
};

通过将chat.idnewComment.id进行比较,应该在聊天数组中更新正确的 comments ,并且应该相应地更新状态.

如果这不能解决问题,可能还有其他因素在起作用,比如聊天状态最初是如何填充的,或者它是如何传递给ChatCard组件的.在这种情况下,提供更多详细信息或周围的代码将有助于进一步的故障排除.

Reactjs相关问答推荐

迁移到React Router Dom v6后,我是否错误地使用了Link组件?

使用Overpass API Endpoint计算 map 上的面积

是否在Extra Reducer完成作业(job)时触发createListenerMiddleware?

REACTION-Easy-SORT返回.map错误

useRef()的钩子调用无效

在 React 中,为什么不将组件和钩子结合起来呢?

如何使用 React 获取表单中的所有值?

React Todo List 应用程序我在实现删除功能时遇到问题

在reactjs中刷新页面时丢失状态值

通过createRoot创建的React元素无法调用Provider值

从 redux 调用UPDATE_DATA操作时状态变得未定义

如何根据用户在react.js中的 Select , Select 多个心形图标?

无法从子组件传递数据到父组件

React:如何使用条件渲染和react 挂钩来更新另一个组件的状态?

map 未显示在react 传单中

不能在我的代码中使用 .给我一个警告!有人知道解决方案吗?

父状态改变后子组件丢失状态

react-markdown 不渲染 Markdown

在 Remix 中使用 chartjs 和 react-chartjs-2 会出现错误react-chartjs-2未在您的 node_modules 中找到

在 redux 工具包中使用 dispatch 发送多个操作