为什么useState不更新数据？
为什么useState不更新数据？
提问于 2022-09-13 11:50:50
我对反应很陌生，上完一门课后，我只想做一个反应项目，就像我之前在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 (
<div>
<ul>
{columns.map((columnName, index) => {
const {name} = columnName;
return (
<li key={index}>{ name }</li>
)
})}
</ul>
</div>
)
} 回答 2
Stack Overflow用户
发布于 2022-09-13 12:06:06
在react状态中，set状态在引用上工作。有时，我们需要将状态更改为与更改其值相同的引用。因此，将相同的引用作为参数，我们需要设置它的副本，因为如果我们将设置为已经处于状态的相同状态，则无法看到任何不同的反应，因此它不会再次呈现。
在您的示例中，您没有对数据使用相同的引用，而是对列使用相同的状态名称和新列。
示例：
设referenceName = 'John'；
setName = useState(referenceName)；
referenceName =‘约翰尼’
setName(...referenceName )
我想设置状态的名称，但是如果我不使用‘.’，因为我使用相同的引用，所以react不会看到任何不同。因此，我需要放一份复制件，以建立一个新的参考。
Stack Overflow用户
发布于 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 (
<div>
<ul>
{columns.map((columnName, index) => {
const { name } = columnName;
return <li key={index}>{name}</li>;
})}
</ul>
</div>
);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73702513
复制相关文章
相似问题
腾讯云开发者
