React报错Objects are not valid as a React child原因排查求助

问题原因 #

你遇到的报错是因为代码中直接尝试将存储对象的数组list作为React子元素渲染，React原生不支持直接渲染普通对象，触发了类型校验报错。
具体错误位置在组件返回值的第一行：

return (
    <>
   {list} // 这里就是错误触发点，list是对象数组，不能直接渲染
   <form onSubmit={handleSubmit}>
       {/* 其余表单代码 */}
   </form>

    {generateTasks}
    </>
)

你已经封装了用来渲染列表的generateTasks变量，完全不需要额外输出原始的list数组，删掉该行即可解决报错。

修复后的完整代码 #

import { useState } from 'react';

function DisplayTasks() {
  let taskList = [{id: "1234", task: "Bake a cake"}];
  const [list, setList] = useState(taskList)
  const [input, setInput] = useState("");

  const handleSubmit = e => {
    e.preventDefault();
    let newNum = Math.floor(Math.random() * 10000);
    let stringNum = newNum.toString()
    setList([...list, {id: stringNum, task: input}])
    setInput("")
  }

  const handleChange = e => {
    setInput(e.target.value);
  }

  const generateTasks = list.map((item) =>{
    // 优化点：这里不需要额外包裹空标签，key直接绑定在最外层元素即可
    return (
      <div key={item.id}>
        <h1>{item.task}</h1>
      </div>
    )
  })
  return (
    <>
      <form onSubmit={handleSubmit}>
        <label htmlFor="tasktitle"></label>
        <input name="tasktitle" onChange={handleChange} placeholder="Add a Task" value={input}></input>
        <button type="submit">Click here to add task</button>
      </form>
      {generateTasks}
    </>
  )
}

额外优化建议 #

• 列表map遍历的时候不需要在外层额外包裹React空标签，把key属性绑定到遍历返回的最外层DOM元素上即可
• 提交任务前可以加输入非空校验，避免添加空任务

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