使用 React 和 Array Javascript 的待办事项列表应用程序答案

【问题标题】：To DoList app using React and Array Javascript使用 React 和 Array Javascript 的待办事项列表应用程序
【发布时间】：2020-07-17 17:23:37
【问题描述】：

首先，我想请求原谅我的英语，我是巴西人。我正在尝试创建一个 React 测试应用程序，该应用程序使用 Javascript 中的方法映射呈现待办事项列表，但反应显示具有空值的数组，如图像。我想知道我做错了什么。我的代码是：

enter image description here

import React from 'react'

import {useState} from 'react'

import {Link} from 'react-router-dom'

import {MdCheck, MdEdit } from 'react-icons/md'

import './styles.css'


function Home() {

    const [task, setTask] = useState('')
    const [msg, setMsg] = useState('')
    const [doTask, setDoTask] = useState([])


    function taskMsg (){

            setMsg(`The task ${task} has added.`)
            setDoTask(doTask.push(task))
            setDoTask(doTask.map(val=> <li> {val}</li>))

    }

    return (
        <div>
            <div>
                <h2>
                    What you want to do today?
                </h2>
                <input type="text"
                onChange={e => setTask(e.target.value)}
                />
                <button id='btn1' onClick={taskMsg}> Add task</button>
                <p>Task: {task}  <MdEdit color='#88aa' size={20}/></p>
                <p>{msg}<MdCheck color='#55bb00' size={20}/></p>
                <p>{doTask}</p>          
            </div>
            <div>
                <Link to='/items'> 
                    <button >See my task</button>
                <p></p>
                </Link>
            </div>
        </div>
    )
}

export default Home

【问题讨论】：

标签： arrays reactjs dictionary

【解决方案1】：

设置状态有问题，如果你想将一个项目添加到一个数组中，你可以使用扩展运算符

function taskMsg (){
        setMsg(`The task ${task} has added.`);
        setDoTask([...doTask,task]);
}

在你的回报中你可以遍历数组

import React, { useState, Fragment } from "react";
 //Rest of Code Here
   <p>
      {doTask.map(item => {
        return (
          <Fragment>
            <li>{item}</li>
          </Fragment>
          );
        })}
     </p>

代码沙盒here

【讨论】：