如何循环react.js状态？

Question

const [toDoList, setToDoList] = useState([
    {morning: "7am-exercise; 8am-eat; 9am-school"},
    {after: "12pm-lunch; 1pm-see friends" },
    {night: "6pm-dinner; 8pm-drink medicines; 10pm-sleep" }
])

const data = this.toDoList;

-------------

return (
    <>
        <div>
            data.morning.split(";").map((toDo) => {
                { toDo.morning } // LINE 137
            }
          )
        </div>
  </>
)

---

./src/App.js 中的错误 模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）： SyntaxError：C：\ Users ebo \ FrontEnd5React \ my-state \ src \ App.js：意外的令牌，预期为“，”（137：26）

---

如果可能，请告诉我如何修复 LINE 137。提前非常感谢！

Answer 1

在您的代码中，您尝试访问 toDoList 数组中每个对象的morning 属性。但是，由于 toDoList 数组中的每个对象仅包含一个键值对，因此您不需要使用 map() 来迭代该数组。相反，您可以直接访问每个对象的早晨键的值。以下是修复第 137 行的方法：

return (
<>
    <div>
        {toDoList.map((item, index) => (
            <div key={index}>{item.morning.split(";").map(toDo => (
                <div key={toDo}>{toDo}</div>
            ))}</div>
        ))}
    </div>
</>
)

在此代码中：

我们使用 toDoList.map() 迭代 toDoList 数组中的每个对象。 对于每个对象（项目），我们访问morning属性并用“;”分割它的值。 然后，我们映射生成的任务数组 (toDo) 并在元素中渲染每个任务。 我们使用 key 属性为每个任务元素提供唯一的标识符。这有助于 React 在列表更改时有效地更新 UI。 这应该可以修复您遇到的错误并正确渲染 toDoList 状态中的任务。