list.map 不是函数 help create-react-app

Question

嗨，有人能告诉我为什么我收到 list.map is not a function 错误吗？我很确定我的 React 代码使列表成为一个数组，但我是初学者所以我可能忽略了一些东西

import React, { useState, useEffect } from "react";
import Task from "./Task";

function Home() {  
  const [text, setText] = useState("");
  const [task, setTask] = useState("");
  const [list, setList] = useState([]);

  useEffect(() => {
    setList(list.push(task));
  }, [task]);

  const addTask = (e) => {
    e.preventDefault();
    setTask(text);
    setText("");
  };

  const updateText = (e) => {
    setText(e.target.value);
  };

  return (
    <div className="Home">
      <h3>Home Page</h3>
      <form onSubmit={addTask}>
        <input type="text" value={text} onChange={updateText} />
        <button type="submit">Add</button>
      </form>
      <div className="listoftasks">
        {list.map((t) => (
          <Task
            text={t}            
          />
        ))}
      </div>
    </div>
  );
}

export default Home;

Answer 1

Array.push() 不 return 更新数组。因此你应该使用 Array.concat() -

useEffect(() => {
    setList(list.concat(task));
  }, [task]);

Answer 2

当 task 更新时，您将 list 的新值设置为 push 的结果，这是数组的新长度。

你应该推送然后更新状态

  useEffect(() => {
    list.push(task);
    setList(list.slice());
  }, [task]);

Answer 3

或使用扩展运算符，用于不变性函数方法：

  useEffect(() => {
      setList([...list, task]);
  }, [task]);

Answer 4

Array.push() returns一个数字，现在修改的数组的新长度。

useEffect(() => setList(list.push(newThing))) // list is now a number!!!

您已将列表转换为数字，所以现在对于 3 项数组（曾经是 2 项），您将调用 3.map() 而 3 没有地图方法就可以了。

更糟糕的是，如果您只是按下并重置引用，您将不会更新

useEffect(() => {
  list.push(newThing)
  setList(list) // won't update! list === list is true, and thus does not trigger render
})

您可以通过创建新数组并通过串联传递它来通过几种方式更新列表

useEffect(() => setList(list.concat(newThing)) // works

或传播

useEffect(() => setList([...list, newThing])) // works

完成此操作后，将无法检查传递的实体是否具有相同的值。这应该允许触发渲染并显示您的新更新。

list.map 不是函数 help create-react-app

list.map is not a function help create-react-app

javascript

arrays

reactjs

create-react-app

react-hooks