score:6

Accepted answer

There are a few issues, one or more of which are probably the problem (particularly #4):

  1. State changes are asynchronous. You won't see the changes to state on this.state immediately after calling it. If you need to see the changes, use the callback (the second argument to setState).

  2. setState has no return value, so it doesn't make sense to call setState with the return value of setState. I wouldn't think that was the problem, but this:

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

    should be

    this.setState(res.data);

  3. The documentation doesn't say that the render method can return undefined. So it's not defined (no pun!) if you return undefined, as you're doing.

  4. In your render, you're using this.provider. If provider is provided by res.data, you should be using this.state.provider.

You mentioned looking at various other methods (componentShouldUpdate, etc.), but there's no need in this case. You're kicking off your async process in the right place (componentDidMount), and setting state in response to that completing (which is also correct, though see #1 and #2 above).

score:-1

Please see below.

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;

score:1

You can also confirm if your state has updated or not.

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

Related Query

More Query from same tag