ReactJS简易Todo应用编辑提交后出现渲染错误求助

问题描述 #

开发的React Todo应用中，提交任务编辑后出现以下错误：

1. Uncaught Error: Objects are not valid as a React child (found: object with keys {id, txt, completed}). If you meant to render a collection of children, use an array instead.
2. 错误组件链：p -> span -> Typography -> ListItemText -> Grid -> Todo -> ListItem -> List -> ... -> App

提交编辑后切换函数内的console.log能正常执行，但切换回Todo组件时失败，初始状态下Todo组件可正常工作。

问题原因 #

核心错误出在editTodoForm.js的handleSubmitAndToggle函数中：调用handleEditTask时，传递的第二个参数是整个task对象，而TodoApp.js中的handleEditTask函数期望接收字符串类型的任务文本。这导致任务对象的txt属性被替换成了整个任务对象，当React尝试渲染这个对象时，就抛出了"Objects are not valid as a React child"的错误。

解决方案 #

修改editTodoForm.js中的handleSubmitAndToggle函数，将传递给handleEditTask的第二个参数改为输入框的value（即编辑后的文本）：

// editTodoForm.js 修正后的代码
export default function ({task, handleEditTask, toggleEditForm}) {
    const [value, handleChange, reset] = useInputStatee(task.txt)

    let handleSubmitAndToggle = (e) => {
        e.preventDefault();
        // 将第二个参数从 task 改为 value
        handleEditTask(task.id, value);
        reset();
        toggleEditForm();
        console.log("SRFDWSFLDS#@$@#$@$$#???")
    }

    return (
        <form onSubmit={handleSubmitAndToggle}>
            <TextField fullWidth value={value} onChange={handleChange} margin="normal"/>
        </form>
    )
}

额外优化建议 #

1. TodoList.js 中使用task.id作为key：
   原代码用数组索引作为key，在任务列表顺序变化时可能导致渲染异常，建议改为：

   let toDos = tasks.map((task) =>
       <React.Fragment key={task.id}>
           {/* 其余代码不变 */}
       </React.Fragment>
   )
   

2. Todo.js 简化task变量：
   原代码中多余的task变量可以直接替换为taskItself.txt，减少冗余：

   {taskItself.completed ? 
       <ListItemText style={{color: "red", letterSpacing: "3px", textDecoration:"line-through"}}>{taskItself.txt}</ListItemText> : 
       <ListItemText style={{color: "green", letterSpacing:"3px"}}>{taskItself.txt}</ListItemText> 
   }
   

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