使用React Hooks重构Todo应用：提交数据渲染异常问题咨询

嘿，我看到你的问题了，咱们来一步步拆解并解决它！

问题出在哪？ #

你的核心问题是handleSubmit函数的逻辑错误。当前你是这么添加新内容的：

saveMessages([...messages, post, title])

这里你把post（消息文本）和title（标题）当成了两个独立的元素塞进了messages数组，但你的Post组件期望接收的是一个包含title和message属性的对象。当你遍历messages时，新添加的元素是普通字符串，根本没有title和message属性，所以渲染不出内容，只能看到Post组件默认的图片（如果有的话）。

怎么修复？ #

完全不需要创建两个分开的数组！你只需要把每次输入的标题和消息包装成一个对象，再添加到messages数组里就行。修改后的handleSubmit函数应该是这样：

const handleSubmit = () => {
  // 把标题和消息打包成一个符合要求的对象
  const newPost = {
    title: title,
    message: post
  };
  // 用扩展运算符复制原数组，再添加新对象
  saveMessages([...messages, newPost]);
  // 可选：提交后清空输入框，提升用户体验
  setTitle('');
  setPost('');
};

额外优化：合并表单State #

如果想让代码更简洁，你可以把title和post的State合并成一个对象，这样只需要一个处理函数就能搞定所有输入：

// 合并为一个表单State对象
const [formData, setFormData] = useState({
  title: '',
  message: ''
});

// 统一的输入变更处理函数
const handleInputChange = (e) => {
  const { name, value } = e.target;
  setFormData(prevState => ({ ...prevState, [name]: value }));
};

// 对应的输入框修改（添加name属性）
<input 
  name="title"
  value={formData.title} 
  onChange={handleInputChange}
  className='mr-3 textField' 
  placeholder='your title ...' 
  style={{padding: '5px 5px', borderRadius: '50px', width: '60%', boxShadow: '0px 4px 16px rgba(17,17,26,0.1), 0px 8px 24px rgba(17,17,26,0.1), 0px 16px 56px rgba(17,17,26,0.1)'}}
/>
<textarea
  name="message"
  value={formData.message}
  onChange={handleInputChange}
  className='mr-3 textField' 
  placeholder='your message ...' 
  style={{padding: '5px 20px', borderRadius: '50px', width: '60%', boxShadow: '0px 4px 16px rgba(17,17,26,0.1), 0px 8px 24px rgba(17,17,26,0.1), 0px 16px 56px rgba(17,17,26,0.1)'}}
/>

// 简化后的handleSubmit
const handleSubmit = () => {
  saveMessages([...messages, formData]);
  // 清空表单
  setFormData({ title: '', message: '' });
};

为什么不用两个数组？ #

你的需求是保存“一条包含标题和消息的完整记录”，每个记录是一个独立的实体，放在同一个数组里既符合逻辑，也方便后续的遍历、编辑、删除等操作。如果用两个数组，你还得手动维护两个数组的索引对应关系，反而会增加代码复杂度，完全没必要哦。

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