為什么 useState 不更新數據？

Question

我對 react 很陌生，在學習完課程后，我只想做一個我之前在 Vue 中已經做過的 react 項目，只是為了練習 React。 但是我的 useState 沒有更新我想要列出的數據。

來自 api 的數據是一個對象數組。 最終目標是制作數據表。 所以為了動態，我取了第一個 object 的鍵來取列名。 我使用“react-data-table-component”中的 DataTable 作為數據表。 那沒有用。 現在只是為了調試，我想列出列名，但這也不起作用，但它控制台日志。

我知道這是非常基本的事情，並且在互聯網上搜索了很多幫助，並試圖解決誰面臨許多門戶網站的類似問題，但到目前為止沒有任何幫助。 我在哪里做錯了？

import React, { useState, useEffect, Component } from 'react'; 
import axios from 'axios'


const tableData = () => {
    const [tableData, setTableData] = useState([]);
    const [columns, setColumns] = useState([])

    useEffect(() => {
        axios.get('http://localhost:4000/')
            .then((res) => {
                if (res.status === 200) {
                    if (res.data === 0) {
                        console.log("Something is wrong !!!");
                    } else {
                        const data = res.data['rows']
                        const columns = Object.keys(data[0])
                        console.log(columns)
                        setTableData(data)
                        setColumns(columns)
                    }
                }
            }).catch(error => {
                console.log(error)
            })
    }, [])

    return (
        <div>
            <ul>
            {columns.map((columnName, index) => {
                const {name} = columnName;
                return (
                        <li key={index}>{ name }</li>
                       )
            })}
            </ul>
        </div>
    ) 
} 

Answer 1

在反應 state 中，設置 state 適用於參考。 有時我們需要將 state 更改為與我們更改它的值相同的參考。 所以改為將相同的引用作為參數，我們需要設置它的副本，因為如果我們將設置為已經在 state 中的相同 state，react 看不到任何不同，因此它不會再次渲染。

在您的示例中，您沒有對數據使用相同的引用，但對於列，您使用了相同名稱的 state 和新列。

例子：

讓referenceName = '約翰';

const [名稱，setName] = useState(referenceName);

參考名稱 = '約翰尼'

設置名稱（...參考名稱）

我想設置 state 的名稱，但如果我不使用“...”，反應不會看到任何區別，因為我使用相同的引用..所以我需要復制 od 設置的引用新的參考。

Answer 2

1. 在這里檢查響應數據的形狀我通過調用 function 簡化了 useEffect

    import React, { useState, useEffect, Component } from "react";
    import axios from "axios";
    
    const tableData = () => {
      const [tableData, setTableData] = useState([]);
      const [columns, setColumns] = useState([]);
    
      const fetchDetails = () => {
        axios
          .get("http://localhost:4000/")
          .then((res) => {
            const data = res.data["rows"];
            const columns = Object.keys(data[0]);
            console.log(columns);
            setTableData(data);
            setColumns(columns);
          })
          .catch((error) => {
            //dont need to check the status if any occurs it will come to this catch block
            console.log(error.message);
          });
      };
    
      useEffect(() => {
        fetchDetails();
      }, [columns]);
    
      return (
        <div>
          <ul>
            {columns.map((columnName, index) => {
              const { name } = columnName;
              return <li key={index}>{name}</li>;
            })}
          </ul>
        </div>
      );
    };

Answer 3

你能試試這段代碼嗎

 const [tableData, setTableData] = useState([]);
    const [columns, setColumns] = useState([])
    const [status , setStatus] = useState("idle")

  const fetchData = async()=>{
    try{
      setStatus("loading")
    const getFetch = await fetch('http://localhost:4000/')
    const convertToJson = await getData.json()
    const data = convertToJson.data['rows']
                        const getColumns = Object.keys(data[0])
                        console.log(getColumns)
                        setTableData(data)
                        setColumns(getColumns)
                        setStatus("success")
}catch(er){
  console.log("something wrong")
  setStatus("error")
}   
}
  React.useEffect(()=>{
   fetchData()
},[])