我有一个Posts组件的posts数组,包括几个帖子只是举个例子。现在我试图添加新的职位到我的数组,我希望该职位是渲染与其他人。我没有太多的经验与React,所以我不知道如何添加新元素到一个数组。我试图这样做与“setPosts(... posts,newPost)",但它不工作,现在我所有的职位消失后渲染。
const Posts = () => {
const [posts, setPosts] = useState([
{id: 1, title: 'First Post', content: 'First Post Content'},
{id: 2, title: 'Second Post', content: 'Second Post Content'},
{id: 3, title: 'Third Post', content: 'Third Post Content'}
]);
const [newId, setNewId] = useState('');
const [newTitle, setNewTitle] = useState('');
const [newContent, setNewContent] = useState('');
const handleIdChange = (e) => {
setNewId(e.target.value)
}
const handleTitleChange = (e) => {
setNewTitle(e.target.value)
}
const handleContentChange = (e) => {
setNewContent(e.target.value)
}
const handleSubmit = (e) => {
e.preventDefault();
const newPost = {
id: newId,
title: newTitle,
content: newContent
}
setPosts(...posts, newPost)
}
return <div>
<form onSubmit={handleSubmit} className='posts-form'>
<label>
New ID: <input type='text' onChange={handleIdChange} value={newId} />
</label>
<br />
<br />
<label>
New Title: <input type='text' onChange={handleTitleChange} value={newTitle} />
</label>
<br />
<br />
<label>
New Content: <input type='text' onChange={handleContentChange} value={newContent} />
</label>
<br />
<br />
<input type='submit' value='Add' />
</form>
<PostsList posts={posts} />
</div>
}
const PostsList = (props) => {
return <div className='posts-list'>
{ props.posts.length > 0 ? props.posts.map(
(post) => <div key={post.id} className='post'>
<h1 className='post-title'>{post.id}. {post.title}</h1>
<p className='post-content'>{post.content}</p>
</div>
) : <h1 style={{color: 'gray', fontFamily: 'monospace'}}>No posts found!</h1> }
</div>
}
我只是想新的职位与其他职位呈现,但它显示“没有找到帖子!”提交后。
2条答案
按热度按时间bxpogfeg1#
像这样在你的状态中使用括号,在帖子状态中使用扩展操作符,它将附加以前的帖子
qv7cva1a2#
在您的实施中,您正在执行以下操作:
这样做,你就传递了两个参数给
setPosts
函数,而setPosts
函数期望你传递一个参数来表示你的更新状态,也就是新的数组。您可以使用spread运算符
...
创建一个新数组,如下所示:上面的语句扩展
posts
数组中的所有值,并在使用[]
创建的新数组的末尾添加新元素newPost
。因此,您的实现应该是这样的:
希望能有所帮助!