React中结合useState使用.map()合并数组得空值及渲染报错问题

问题排查&修复方案 #

1. 原循环setState逻辑错误原因 #

• React的状态更新是异步批量执行的，循环调用setQuestionRepliesAll时，每次读取的questionRepliesAll都是初始的空数组，最终只会得到空值
• 代码中直接引用了未定义的desc变量，实际应该从遍历的reply对象中取值reply.desc

2. 首次实现方案的问题 #

• 仍然存在未定义的desc变量问题
• 取用户ID时字段名错误：reply_users数组里的对象键是user不是id，写questionReplies.reply_users[i].id会拿到undefined

3. Objects are not valid as a React child报错原因 #

这个报错是因为你渲染时直接把整个对象放到了JSX中，React不支持直接把对象作为子元素渲染，必须取对象内的具体基础类型值（字符串、数字等）。

正确实现代码 #

状态赋值逻辑

const [questionRepliesAll, setQuestionRepliesAll] = useState([])

const [questionReplies, setQuestionReplies] = useState({
    replies: [
        {
            desc: 'hello word 1'
        },
        {
            desc: 'hello word 2'
        }
    ],
    reply_users: [
        {
            user: 1
        },
        {
            user: 2
        }
    ]
})

// 正确合并逻辑
const combined = questionReplies.replies.map((reply, i) => {
  return {
    reply: reply.desc,
    user_id: questionReplies.reply_users[i].user
  }
})
setQuestionRepliesAll(combined)

渲染逻辑示例

// 渲染时要取对象的具体属性，不能直接丢整个对象
{
  questionRepliesAll.map((item, index) => (
    <div key={index}>
      <p>回复内容：{item.reply}</p>
      <p>用户ID：{item.user_id}</p>
    </div>
  ))
}

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