list.map不是一个帮助创建react应用程序的函数

Question

嗨，有人能告诉我为什么我得到列表吗？map不是函数错误吗？我很确定我的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()不返回更新后的数组。因此，您应该使用Array.concat()-

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

Answer 2

或者使用扩散算子，对于不变性函数方法：

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

Answer 3

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

你应该推送然后更新状态

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

Answer 4

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

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

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