React向数组添加新元素失败求助：提交后现有帖子消失

问题核心 #

你的代码中setPosts的调用方式错误：

setPosts(...posts, newPost)

扩展运算符...会把原posts数组的每个元素拆成单独参数传给setPosts，但React状态更新函数需要接收完整的新状态值（这里要求是数组类型）。实际执行后，posts会被设置成原数组的第一个元素（单个对象），而非新数组。此时props.posts.length不存在（对象没有length属性），条件判断props.posts.length > 0不成立，因此显示"No posts found!"。

解决方法 #

将原数组和新帖子包裹在新数组中，确保传给setPosts的是完整的数组状态：

setPosts([...posts, newPost])

修复后的完整提交函数 #

const handleSubmit = (e) => {
    e.preventDefault();
    // 转换id为数字，和原有数据类型保持一致
    const newPost = {
        id: Number(newId),
        title: newTitle,
        content: newContent
    }
    setPosts([...posts, newPost]);
    // 提交后清空输入框，提升用户体验
    setNewId('');
    setNewTitle('');
    setNewContent('');
}

可选优化建议 #

可以合并输入状态，减少useState的重复使用，简化代码：

// 合并输入状态
const [newPostForm, setNewPostForm] = useState({
  id: '',
  title: '',
  content: ''
});

// 统一处理输入变化
const handleInputChange = (e) => {
  const { name, value } = e.target;
  setNewPostForm(prev => ({ ...prev, [name]: value }));
}

对应的输入框需要添加name属性：

<label>
  New ID: <input type='text' name="id" onChange={handleInputChange} value={newPostForm.id} />
</label>
<br />
<br />
<label>
  New Title: <input type='text' name="title" onChange={handleInputChange} value={newPostForm.title} />
</label>
<br />
<br />
<label>
  New Content: <input type='text' name="content" onChange={handleInputChange} value={newPostForm.content} />
</label>

内容的提问来源于stack exchange，提问作者Aram