状态更改后，React不会更新组件

Question

我第一次使用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进行调用，这将使我得到一个仅包含provider和date标签的对象。

假设我要显示提供程序。 我在console.log看到我的组件可以实现查询API并返回我的值。

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

我试图回调App.render，以使用schouldComponentUpdate ，在其他帖子中 ，我注意到每个人都使用ReactDOM.render() 。 它是什么 ？ 如何使用它 ？

问候。

Answer 1

存在一些问题，其中一个或多个可能是问题（尤其是第4个问题）：

1. 状态更改是异步的 。 调用它后，您不会立即在this.state上看到state的更改。 如果需要查看更改，请使用回调（ setState的第二个参数）。

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

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

   应该

    this.setState(res.data); 

3. 文档没有说render方法可以返回undefined 。 因此，如果您在执行操作时返回undefined ，则它没有定义（没有双关！）。

4. 在render ，您正在使用this.provider 。 如果provider由res.data提供，则应使用this.state.provider 。

您提到要查看其他各种方法（ componentShouldUpdate等），但是在这种情况下没有必要。 您将在正确的位置（ componentDidMount ）启动异步过程，并根据完成情况设置状态（这也是正确的，尽管请参见上面的＃1和＃2）。

Answer 2

您还可以确认您的状态是否已更新。

this.setState(res.data, () => console.log(this.state));

Answer 3

请看下面。

 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(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;