反应来自 axios 的动态评论内容不呈现

Question

请参阅下面 Zac 的解决方案

这部分代码没有渲染，谁能帮帮我。评论react变量是一个数组，设置为：

0: {comment: {…}, subcomments: Array(0)}
1: {comment: {…}, subcomments: Array(0)}
2: {comment: {…}, subcomments: Array(0)}
3: {comment: {…}, subcomments: Array(0)}
4: {comment: {…}, subcomments: Array(0)}
5: {comment: {…}, subcomments: Array(0)}
6: {comment: {…}, subcomments: Array(0)}
7: {comment: {…}, subcomments: Array(0)}
8: {comment: {…}, subcomments: Array(0)}
length: 9

即使我在使用地图，它仍然无法正常工作，我已经解决了 5 个小时！我认为我对代码进行了非常明显和微小的修改，但它开始工作了！

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
                <CommentsBlock>
                  {comments.map((c, i) =>
                      {return (<Comment key={i}>
                        Hello
                        <Nickname>{c.comment.author}</Nickname>
                        <Contents>{c.comment.content}</Contents>
                        <LowerCommentContainer>
                          <span>{c.comment.date}</span>
                          <span
                            onClick={() => {
                              setPrev(c.comment);
                            }}
                          >
                            reply
                          </span>
                        </LowerCommentContainer>
                      </Comment>
                      )}
                   )}

                  <ContentsInputTitle id="commenttitle" />
                  <ContentsInput id="commentcontent" />
                  <Confirm id="confirm">Post</Confirm>
                </CommentsBlock>

控制台中的评论：

useEffect(async () => {
    setComments([]);
    let i = 0;
    setLoaded(false);
    await article.commentsArr.forEach(async (c) => {
      const { data } = await axios({
        url: vars.BACKENDURL + "/getcomment",
        withCredentials: true,
        method: "POST",
        data: { comment: { _id: c } },
      });
      if (!comments.includes({ ...data })) {
        comments.push({ ...data });
      }
      console.log(comments);
      i++;
      if (i === article.commentsArr.length - 1) {
        setLoaded(true);
        console.log("RESULT", comments);
        document
          .querySelector("#confirm")
          .addEventListener("click", async () => {
            const data = await axios({
              url: vars.BACKENDURL + "/comment",
              withCredentials: true,
              method: "POST",
              data: {
                article: article,
                comment: {
                  title: document.querySelector("#commenttitle").value,
                  content: document.querySelector("#commentcontent").value,
                  prev: prev,
                },
              },
            });
          });
      }
    });
  }, []);

Answer 1

首先，您需要使用 useState 挂钩中的 setter 处理程序来更新状态，在本例中为 setComments，（例如 setComments(newComments)）

二、参考React Hooks API Reference 注意：

Unlike the setState method found in class components, useState does not automatically merge update objects. You can replicate this behavior by combining the function updater form with object spread syntax:

所以而不是 comments.push({ ...data });，或 setComments([...comments, { ...data }]);、

你需要使用setComments(current => [...current, { ...data }]);

反应来自 axios 的动态评论内容不呈现

React dynamic comments content from axios not rendering

html

javascript

render

reactjs

axios