我对反应很陌生,上完一门课后,我只想做一个反应项目,就像我之前在Vue做过的那样,只是为了练习反应。但是我的useState没有更新我想要列出的数据。
api中的数据是一个对象数组。最终目标是创建一个数据表。因此,为了保持动态,我取了第一个对象的键来获取列名。我在数据表中使用了“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 ( {columns.map((columnName, index) => { const {name} = columnName; return ( <li key={index}>{ name }</li> }
发布于 2022-09-13 12:06:06
在react状态中,set状态在引用上工作。有时,我们需要将状态更改为与更改其值相同的引用。因此,将相同的引用作为参数,我们需要设置它的副本,因为如果我们将设置为已经处于状态的相同状态,则无法看到任何不同的反应,因此它不会再次呈现。
在您的示例中,您没有对数据使用相同的引用,而是对列使用相同的状态名称和新列。
示例:
设referenceName = 'John';
setName = useState(referenceName);
referenceName =‘约翰尼’
setName(...referenceName )
我想设置状态的名称,但是如果我不使用‘.’,因为我使用相同的引用,所以react不会看到任何不同。因此,我需要放一份复制件,以建立一个新的参考。
发布于 2022-09-13 12:17:28
简化了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 ( {columns.map((columnName, index) => { const { name } = columnName;