0

I'm creating a React app with some API calls. I have the following code to call an API which has an object with several keys & values and update some states with those values. But after updating states, program still show initial states instead updated values. When I put console.log inside the state call back, that console part will be missing. And then console says map is not a function in orderd.map So I guess the initial state of ordered is the problem

Component:

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: '',
      ordered: 'null'
    };
  }

  componentDidMount() {
    API.get('project')
      .then(({ data }) => {
        this.setState({ 
          columns: data.response,
          ordered: Object.keys(data.response)
        } () => 
          console.log("order is ",this.state.ordered);
        );
      })
      .catch((err) => {
        console.log("AXIOS ERROR: ", err);
      })
  }

  render(){
     return(
       <div>\
         {(provided) => (
             <div ref={provided.innerRef} {...provided.droppableProps} className={classes.taskboard}>
               {ordered.map((key, index) => (
                  <Column
                    key={key}
                    index={index}
                    title={key}
                    tasks={columns[key]}
                    getCardId={this.getPojectId}
                  />
                ))}
             </div>
           )}
       </div>
     )
  }
}

API success is working. But what I can see in console is "order is null"

David Johns
  • 1,254
  • 3
  • 19
  • 48
  • 1
    From react docs: "Think of setState() as a request rather than an immediate command to update the component ... React does not guarantee that the state changes are applied immediately." It has a callback so you can move your console.log there. – Walk Apr 08 '19 at 06:07
  • the setState function is a asynchronous. Try to use callback `this.setState({}, () => {})` – kkangil Apr 08 '19 at 06:11
  • @Walk I still can't get the updated state in call back – David Johns Apr 08 '19 at 06:18
  • @DavidJohns can you show what you tried? also do `console.log(data.response)` and check the value. – Mayank Shukla Apr 08 '19 at 06:19
  • 1
    since you are using `ordered.map`, defined `ordered` as an array, `ordered: []`, also are you getting the correct value of `data.response`? – Mayank Shukla Apr 08 '19 at 06:41
  • 1
    I can find two errors in your code: - First one is React makes an initial `render` before calling `componentDidMount`, so React will try to apply the `map` function on your initial `ordered` property and will fail because is a String, initialize it as an empty array - The second one is `setState`is asynchronous, and the callback called after the state is set is not assured, so you have to use the `componentDidUpdate` hook if you want to ensure access to your new ordered array. – Pablo Huet Carrasco Apr 08 '19 at 07:31
  • 1
    @MayankShukla Yes I'm getting the correct API data. I think the problem is the initial state has set as a string. Thank you – David Johns Apr 08 '19 at 07:36
  • 1
    @PabloHuetCarrasco Yes that was the problem. I solved it. Thank you – David Johns Apr 08 '19 at 07:36

0 Answers0