list.map 不是函数帮助 create-react-app答案

【问题标题】：list.map is not a function help create-react-applist.map 不是函数帮助 create-react-app
【发布时间】：2020-08-15 00:46:08
【问题描述】：

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

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;

【问题讨论】：

标签： javascript arrays reactjs react-hooks create-react-app

【解决方案1】：

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

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

【讨论】：

但我的考虑是为什么 map 不是一个函数，因为它最初定义了 []？
map 不是 Number 上定义的函数。你现在正在用一个数字填充列表。
因为它不是列表的功能。因为他正在将列表设置为一个数字。 setList(list.push(task)); => setList(数组长度)
哈哈...我不知道push 实际上返回了新长度:-)

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

你应该推送然后更新状态

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

【讨论】：

不，您需要创建一个新的数组引用才能正确更新状态，您正在推送到现有数组

【解决方案4】：

Array.push() 返回一个数字，即现在修改的就地数组的新长度。

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

您已经将列表变成了一个数字，所以现在对于一个 3 项数组（曾经是 2 项），您将调用 3.map() 并且 3 上没有 map 方法。

更糟糕的是，如果您只是推送并重置您不会更新的参考

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

一旦完成，它将无法检查传递的实体是否为相同的值。这应该可以触发渲染并显示您的新更新。

【讨论】：