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

Posted 2023-02-23

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

【英文标题】：My to do list in this React app doesn't appear

【发布时间】：2020-11-21 10:58:22

【问题描述】：

简单的应用程序。它只返回 <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>
    )

【参考方案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 => ...) 来映射任务

【讨论】：

现在我得到 taskList.list is undefined.

好的，我给你做了一个代码沙箱并编辑了答案（还包括如何附加一个新任务，因为这可能是你的下一个问题）

这绝对是我的下一个问题！

:-) 如果答案有用，请不要忘记投票和批准