反应 useState 和 map()

Question

我正在尝试从地图进行评论输入，但由于我使用相同的 useState，因此所有输入字段都已更改。 如何定位特定输入？

return (
  <div>
    {posts.map(post => (
      <div key={post.id}>
        <img
          src={`https://localhost:1111/api/posts/uploads/images/${post.content}`}
          alt={`${post.id}`}
        />
        <p>{post.description}</p>
        <span>{post.likes ? post.likes : 0}</span>
        <button onClick={() => like(post.id)}>Like</button>
        <Link to={`/post/${post.id}`}>Edit</Link>
        <button onClick={() => deletePost(post.id)}>Delete</button>
        <form onSubmit={uploadComment}>
          <input
            type="text"
            onChange={handleComment}
            value={comment}
            placeholder="Comment"
          />
        </form>
      </div>
    ))}
  </div>
)

Answer 1

每个渲染的帖子都有一个自己的状态，这意味着它是一个自己的组件的用例：

function Post(post, deletePost) {
  const [comment, setComment] = useState('');
  const uploadComment = () => {}; // your code is missing
  return (
      <div key={post.id}>
        <img
          src={`https://localhost:1111/api/posts/uploads/images/${post.content}`}
          alt={`${post.id}`}
        />
        <p>{post.description}</p>
        <span>{post.likes ? post.likes : 0}</span>
        <button onClick={() => like(post.id)}>Like</button>
        <Link to={`/post/${post.id}`}>Edit</Link>
        <button onClick={() => deletePost(post.id)}>Delete</button>
        <form onSubmit={uploadComment}>
          <input
            type="text"
            onChange={e => setComment(e.target.value)}
            value={comment}
            placeholder="Comment"
          />
        </form>
      </div>
  )
}

然后你的渲染函数看起来像这样：

return (
  <div>
    {posts.map(post => <Post post={post} deletePost={deletePost} />)}
  </div>
)

Answer 2

考虑对每个输入使用 react useState hook。