如何将数组中的值推送到反应中的状态对象中

Question

我是 React 的新手，正在从事我们在 facebook 和 youtube 评论部分看到的评论嵌套项目。我已经创建了状态来管理嵌套。这是单个评论状态：

const [comment, setComment] = useState({author:"", desc:"",replies:[]});

我正在管理数组中的评论列表：

const [comments, setComments] = useState([]);

我已经设法在评论状态中添加或删除评论，如下所示：

const addComment=()=>{
     if(comment.desc !== ""){
      setComments((prevComments)=>{
        return  [...prevComments, comment]
      });
      setComment({author:"", desc:"", replies:[]});
      setIsCommentVisible(true);
     }
   }


   const removeComment=(id)=>{
      setComments((prevComments)=>{
       return prevComments.filter((val, ind)=> ind !==id);
      });
   }

但是我在将对象数组中的回复添加到它的回复中时遇到问题属性这也是一个数组。

所以我想知道通过 id 获取特定评论并将回复推送到其回复中的方法属性。

//This is what I have tried
 const addReply=(id, reply)=>{
    setComments((prevComments)=>{
      return [...prevComments, /*So what's the approach here how to get
 access to the specific indexed replies property and push a reply into it.*/]
    });
   }

Answer 1

看起来您正在使用当前索引来更新状态。

浅复制正在更新的状态和任何嵌套状态。使用 id 匹配当前映射的评论状态，当您在要更新的评论上时，浅复制评论并通过附加 [=] 更新 replies 属性 14=] 并返回一个新的数组引用。

const addReply = (id, reply) => {
  setComments(prevComments => prevComments.map(
    (comment, index) => index === id 
      ? {
        ...comment,
        replies: comment.replies.concat(reply)
      }
      : comment
    )
  );
}

理想情况下，您的 comment 对象将分配给它们一个 GUID，这样可以更容易地独立于任何数组排序顺序或在 React 中改变数组时弹出的任何其他问题来匹配它们。

示例：

import { v4 as uuidV4 } from 'uuid';

...

const addComment = () => {
  if (comment.desc !== "") {
    setComments((prevComments) => {
      return [...prevComments, { ...comment, id: uuidV4() }]
    });
    setComment({ author: "", desc: "", replies: [] });
    setIsCommentVisible(true);
  }
} 

const addReply = (id, reply) => {
  setComments(prevComments => prevComments.map(
    (comment) => comment.id === id 
      ? {
        ...comment,
        replies: comment.replies.concat(reply)
      }
      : comment
    )
  );
}

如何将数组中的值推送到反应中的状态对象中

How to push Value in an array exist inside in an object of state in react

javascript

javascript-objects

reactjs

react-state-management

react-hooks