javascript - React doesn't update component after state changes - Stack Overflow

admin管理员组

文章数量:1401183

I've some trouble while using React for my first time. I wrote a simple class as follow in my project :

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'
  };

  ponentDidMount() {
    axios.get('x/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;

I want to get and display some data from the API I'm asking. I used to do this a call to this API that will render me an object containing only provider and date labels.

Let's say I want to display the provider. I see with console.log that my ponent achieve to query the API, and to return my values.

My problem is that the ponent wouldn't update after this operation.

I tried to callback App.render, to use schouldComponentUpdate, and in others posts, I noticed that everybody use ReactDOM.render(). What is it ? How to use it ?

Regards.

I've some trouble while using React for my first time. I wrote a simple class as follow in my project :

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'
  };

  ponentDidMount() {
    axios.get('x./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;

I want to get and display some data from the API I'm asking. I used to do this a call to this API that will render me an object containing only provider and date labels.

Let's say I want to display the provider. I see with console.log that my ponent achieve to query the API, and to return my values.

My problem is that the ponent wouldn't update after this operation.

I tried to callback App.render, to use schouldComponentUpdate, and in others posts, I noticed that everybody use ReactDOM.render(). What is it ? How to use it ?

Regards.

• javascript
• reactjs

Share Improve this question Follow asked Dec 10, 2018 at 16:43 PyrrhaPyrrha 15922 silver badges1414 bronze badges 1

• stackoverflow./questions/53469189/… – Pranay Tripathi Commented Dec 10, 2018 at 16:52

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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 (ponentShouldUpdate, etc.), but there's no need in this case. You're kicking off your async process in the right place (ponentDidMount), and setting state in response to that pleting (which is also correct, though see #1 and #2 above).

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

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

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'
  };

  ponentDidMount() {
    axios.get('x./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;

本文标签： javascriptReact doesn39t update component after state changesStack Overflow