list.map 不是 function 幫助 create-react-app

Question

嗨，有人能告訴我為什么我會得到這個列表。map 不是 function 錯誤嗎？ 我很確定我的 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;

Answer 1

Array.push()不返回更新后的數組。 因此，您應該使用Array.concat() -

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

Answer 2

或使用擴展運算符，用於不變性功能方法：

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

Answer 3

當task更新時，您將list的新值設置為push的結果，即數組的新長度。

您應該推送然后更新 state

  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上沒有 map 方法。

更糟糕的是，如果您只是推送並重置您不會更新的參考

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

您可以 go 通過創建新數組並通過串聯傳遞它來更新列表

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

或傳播

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

一旦完成，它將無法檢查傳遞的實體是否是相同的值。 這應該允許觸發渲染並顯示您的新更新。