我有一个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>
}

我只是想新的职位与其他职位呈现，但它显示“没有找到帖子！”提交后。