重新初始化反應 state 對象數組導致未定義的值

Question

我有兩個 ReactJS 組件，一個名為 Projects 的頁面，其中包含一個 Table 組件。 當我初始化具有 Table 數據的 state 時，Table 組件呈現良好：

 const [tableData, setTableData] = useState([{ client: "anna", name: "no", email: "no", date: new Date(), progress: 0 }])

Table 組件剛剛運行的位置：

 <tbody> {props.data.map((obj,index) => <tr onClick = {(event) => {props.updateIndex(index)}}> <td>{obj.client}</td> <td>{obj.name}</td> <td>{obj.email}</td> <td>{obj.date}</td> <td>{obj.progress}</td> </tr> )} </tbody>

但是，一旦我嘗試用數據庫數據覆蓋這個 state，就像這樣，雖然對象數組打印正確，但表無法讀取數據：

 const userInfo = async () => { await Promise.all(res.data.map(async (el, index) => { const contents = await axios.get('/api/user/'+ el.userIDS[0] + '/info'); let clientName = contents.data.firstname + ' ' + contents.data.lastname; let email = contents.data.email; let info = { client: clientName, name: el.Name, email: email, date: date, progress: el.progress }; temp.push(info) })); } setTableData(temp) userInfo();

兩次，state 陣列都能很好地打印出來。 此屏幕截圖顯示了 state (tableData) 在初始化和運行 userInfo() 之后，格式似乎相同：

我想我只是對自己犯的錯誤感到困惑，因為在控制台中 object arrays 看起來很相似，但仍然彼此不同。 我嘗試將結構從二維數組更改為對象數組，我更喜歡這樣，但兩者仍然會導致問題。

Answer 1

您應該在 userInfo function 中調用setTableData(temp) ：

const userInfo = async () => {
      const data = await Promise.all(
        res.data.map((el, index) => {
          return axios.get("/api/user/" + el.userIDS[0] + "/info");
        })
      );
      const temp = data.map(contents => {
        let clientName = contents.data.firstname + " " + contents.data.lastname;
        let email = contents.data.email;
        let info = {
          client: clientName,
          name: el.Name,
          email: email,
          date: date,
          progress: el.progress
        };
        return info;
      });
      setTableData(temp);
    };

同樣在我的建議中，你所有的異步調用都應該 go 里面useEffect反應 function