此 React 应用程序中的待办事项列表未显示

Question

简单应用程序。它只是返回一个<ul>的<li>元素。我是否正确使用useState()？我必须使用Array.from()才能让map函数在taskList上工作。在此之前，我收到一个错误，说taskList.map不是一个函数。

这是App.js:

import React, { useState } from 'react';
import './App.css';
import ToDoList from './components/ToDoList';
import AddTask from './components/AddTask';
function App() {
const [ tasks, setTasks ] = useState(['Test task', 'other task', 'blah task'])
return (
<>
<ToDoList
taskList={tasks}
/>
</>
);
}
export default App;

TodoList.js:

import React from 'react';
import Task from './Task';
import v4 from 'uuid';
export default function ToDoList(taskList) {
const listItems = Array.from(taskList).map((task) => 
<Task key={v4}
detail={task} />
);
return(
<ul>
{listItems}
</ul>
);
}

任务.js:

import React from 'react';
export default function Task(key, detail) {
return ( // Number each item with keys... or an ol instead of ul
<li key={key}>
{detail}
</li>
)
}

Answer 1

EDIT：这里有一个简单的例子可以让您运行https://codesandbox.io/s/jolly-meadow-m87s9?file=/src/App.js.它将数组从状态映射到li元素，并包括一个用于附加状态的处理程序。

不确定您仍然有哪个错误？关于您的Array.from/state问题，请使用以下状态：

[myState, setMyState ] = useState({list: ['item1', 'item2']})

然后，您可以通过简单地执行myState.list.map(item => ...)来映射任务