状态更改后,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调用后,您不会立即看到状态更改.如果需要查看更改,请使用回调(第二个参数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).