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，在others posts中，我注意到每个人都使用ReactDOM.render()。它是什么？如何使用？

致谢。

Answer 1

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

State changes are asynchronous。调用this.state后，您不会立即看到状态更改。如果需要查看更改，请使用回调（setState的第二个参数）。
setState没有返回值，因此使用返回值setState来调用setState是没有意义的。我不认为这是问题所在，但是：
```
this.setState(this.setState(res.data));
```
应该是
```
this.setState(res.data);
```
文档没有说render方法可以返回undefined。因此，如果您在执行操作时返回undefined，则它没有定义（没有双关！）。
在您的render中，您正在使用this.provider。如果provider提供了res.data，则您应该使用this.state.provider。

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

Answer 2

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

Member(memberid: 14, fullname: "Nifras", photourl: "Hello")

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;

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

3 个答案: