gpt4 book ai didi

javascript - 状态更改后 React 不会更新组件

转载 作者:行者123 更新时间:2023-11-30 08:20:58 26 4
gpt4 key购买 nike

我第一次使用 React 时遇到了一些麻烦。我在我的项目中写了一个简单的类如下:

import React, { Component } from 'react';
import axios from 'axios';
import logo from './logo.svg';
import './App.css';

class FigosTest extends React.Component {
state = {
provider: 'unknown',
date: 'sometime'
};

componentDidMount() {
axios.get('x.com/some_api')
.then(res => {
console.log(res.data.provider);
console.log(res.data.date);
this.setState(this.setState(res.data));
console.log("After");
console.log(this.state.provider);
console.log(this.state.date);
});
}

render() {
return this.provider || 'undefined';
}
}

class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Result: <FigosTest/>
</p>
</header>
</div>
);
}
}

export default App;

我想从我请求的 API 中获取并显示一些数据。我曾经通过调用此 API 来执行此操作,该 API 将呈现一个仅包含 providerdate 标签的对象。

假设我想显示提供商。我在 console.log 中看到我的组件实现了查询 API 并返回我的值。

我的问题是该组件在此操作后不会更新。

我尝试回调 App.render,使用 schouldComponentUpdate ,并在 others posts ,我注意到每个人都使用 ReactDOM.render()。它是什么 ?如何使用它?

问候。

最佳答案

有几个问题,其中一个或多个可能是问题所在(尤其是 #4):

  1. State changes are asynchronous .在调用 this.state 后,您不会立即看到状态的变化。如果您需要查看更改,请使用回调(setState 的第二个参数)。

  2. setState没有返回值,所以用setState的返回值调用setState是没有意义的。我不认为这是问题所在,但这:

    this.setState(this.setState(res.data));

    应该是

    this.setState(res.data);
  3. 文档没有说render 方法可以返回undefined。因此,如果您返回 undefined,则它未定义(没有双关语!)。

  4. 在您的render 中,您正在使用this.provider。如果 providerres.data 提供,您应该使用 this.state.provider

您提到查看各种其他方法(componentShouldUpdate 等),但在这种情况下没有必要。您在正确的位置 (componentDidMount) 开始异步进程,并设置状态以响应完成(这也是正确的,尽管请参见上面的 #1 和 #2)。

关于javascript - 状态更改后 React 不会更新组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53710008/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com