|
|
相关文章推荐
|
腼腆的桔子 · Pandas ...· 6 月前 · |
|
|
火星上的葡萄酒 · SHOW [FULL] COLUMNS ...· 7 月前 · |
|
|
精明的饺子 · java.io.FileNotFoundEx ...· 10 月前 · |
|
|
腹黑的足球 · WPF TabControl ...· 1 年前 · |
|
|
成熟的饭盒 · inheritance in Window ...· 1 年前 · |
为什么useState不更新数据？
问
为什么useState不更新数据？
EN
EN
Stack Overflow用户
提问于
2022-09-13 11:50:50
回答 2
查看 61
关注 0
票数 0
我对反应很陌生，上完一门课后，我只想做一个反应项目，就像我之前在Vue做过的那样，只是为了练习反应。但是我的useState没有更新我想要列出的数据。
api中的数据是一个对象数组。最终目标是创建一个数据表。因此，为了保持动态，我取了第一个对象的键来获取列名。我在数据表中使用了“react data - table -component”中的DataTable。那不管用。现在，只是为了调试，我想列出列名，但这也不起作用，但它的控制台日志。
我知道这是非常基本的东西，在互联网上搜索了很多帮助，并试图解决谁面临类似的问题，从很多门户，但到目前为止，没有任何帮助。我哪里做错了？
代码语言：
javascript
复制
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>
}
EN
回答 2
Stack Overflow用户
发布于 2022-09-13 12:06:06
在react状态中，set状态在引用上工作。有时，我们需要将状态更改为与更改其值相同的引用。因此，将相同的引用作为参数，我们需要设置它的副本，因为如果我们将设置为已经处于状态的相同状态，则无法看到任何不同的反应，因此它不会再次呈现。
在您的示例中，您没有对数据使用相同的引用，而是对列使用相同的状态名称和新列。
示例：
设referenceName = 'John'；
setName = useState(referenceName)；
referenceName =‘约翰尼’
setName(...referenceName )
我想设置状态的名称，但是如果我不使用‘.’，因为我使用相同的引用，所以react不会看到任何不同。因此，我需要放一份复制件，以建立一个新的参考。
票数 0
EN
Stack Overflow用户
发布于 2022-09-13 12:17:28
- 检查响应数据的形状--我在这里通过调用外部
简化了useEffect
代码语言：
javascript
复制
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;
推荐文章