我在这个 React 应用程序中的待办事项列表没有出现

Question

简单的应用程序。它只返回 <ul> 的 <li> 元素。 我是否正确使用useState()？我必须先使用Array.from()，然后才能让地图功能在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>
    );
}

这里是 Task.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

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

不确定您仍然遇到哪个错误？关于您的 Array.from/state 问题，请改用 state ：

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

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