this.setState 不更新初始空 state 数组

Question

Initially I have an empty state called hours . I want to update that state with an array that I put together later on called all_hours . When I do this.state.hours = all_hours , the state gets updated. However, when I do this.setState({hours:all_hours}) it doesn't get updated.

class DevicesInfo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hours: []
    };
  }
 

 componentDidMount() {
     // some api calls 
     all_hours = ["12:00 am", "1:00 am", "2:00 am", ... "12:00 pm"];
     this.state.hours = all_hours // correct array printed
     this.setState({hours:all_hours}) // empty array printed
}

Answer 1

Write it this way:

class DevicesInfo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hours: []
    };
  }
 all_hours = ["12:00 am", "1:00 am", "2:00 am", ... "12:00 pm"];

componentDidMount() {
    //this.state.hours = this.all_hours ;
    this.setState({hours: [...this.all_hours]}) ;
  }
}

Answer 2

I gave it a quick run in code sandbox and it seems to be working fine, can you provide extra information so I can guide you better.

here is the link to example on code sandbox for you to check

https://codesandbox.io/s/focused-haibt-b6pw4?file=/src/App.js