状态更改后 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 来执行此操作，该 API 将为我呈现一个仅包含 provider 和 date 标签的对象。

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

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

我尝试回调 App.render，使用schouldComponentUpdate，在others posts，我注意到每个人都使用ReactDOM.render()。它是什么 ？怎么用？

问候。

Answer 1

有几个问题，其中一个或多个可能是问题（尤其是#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。如果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;