从数组中删除 1 个元素时，map 函数仅删除反应中的最后一个元素

Question

我正在从后端获取一组帖子并映射到该数组以显示帖子。但是当我删除任何一个元素并将其再次设置为 useState 时，它只会呈现除最后一个元素之外的所有元素。但是当我刷新页面时，它显示了应该在不刷新页面的情况下呈现的实际数组。

function Feed() {

   const [posts, setPosts] = React.useState(null);
   const [error, setError] = React.useState(false);
   const [isLoading, setIsLoading] = React.useState(true);
   const [refresh, setRefresh] = React.useState(false);

   const {user} = isAuthenticated();

   const loadPosts = () => {
          setIsLoading(true);
          getPosts()
          .then(data => {
                 if(data.error)
                        setError(error)
                 else {
                        console.log(data);
                        setPosts(data);
                        setIsLoading(false);
                 }
          })
          .catch(err => console.log(err))
   }

   React.useEffect(() => {
          loadPosts();
          console.log(posts); //here it logs actual posts array with the right element removed but it doesn't render the same array 
   }, [refresh]);

   React.useEffect(() => {
          loadPosts();
   }, []);

   return (
          <div>
                 <Header />
                        <div className="container">
                               <div className="row">
                                      <div className="col-8 mx-auto">
                                             
                                             <div><Link to={`/user/${user._id}/post/create`}><button className="btn btn-purple rounded-3 col-12 p-3 mx-auto mt-4 mb-5 fw-bold" type="submit"><i class="fas fa-plus"></i><strong>  New Post</strong></button></Link></div>

                                             {posts && (posts.map((post, index) => {
                                                    return <Post postId={post._id} key={index} setRefresh={setRefresh} refresh={refresh} />
                                             }))}

                                      </div>
                               </div>
                        </div>
                 <Footer />
          </div>
   );
}

export default Feed;

数组正在更新，当一个元素被删除但在渲染时，它只是删除最后一个元素，而不是删除一个。

[1]: https://i.stack.imgur.com/6x9eS.png [删除 1 个元素之前][1]

[1]: https://i.stack.imgur.com/zPUnb.png [删除第一个元素后，仅在渲染中删除最后一个元素。在数组中，它删除了第一个。][1]

Answer 1

这就是你 don't use array indexes for element keys if the array can ever change 的原因。 :-) key 的目的是告诉 React 它可以重用哪些元素。如果您使用索引 1（例如）作为元素 A 的键，然后删除索引 0 或 1 处的元素，则下次您使用索引 1 作为键，它位于 different 元素（元素 B）上。相反，使用 post Id（我假设它是 post 所独有的）：

return <Post postId={post._id} key={post._id} setRefresh={setRefresh} refresh={refresh} />

从数组中删除 1 个元素时，map 函数仅删除反应中的最后一个元素

On removing 1 element from array, map function removes only last element in react

javascript

arrays

reactjs

rendering