为什么我只能*访问* setInterval中的对象属性？

Question

Here's the setup. In a previous question, I found out that I could pass an object property via state in a child component, then grab that object property with componentDidUpdate. In this case, both the state and prop are called arrival.

Here's the basic code...

export default class App extends Component {
constructor(){
    super();
    this.state = {
        arrival: {}
    }
}

axiosFunc = () => {
    axios.get('https://api.warframestat.us/pc').then(results => {
        this.setState({
            arrival: results.data.voidTrader.activation,
        });
        setTimeout(this.axiosFunc,1000 * 60);
    })
}

componentDidMount() {
    this.axiosFunc();
}

}

Now in a child component, I can't access the arrival prop like this...

componentDidMount(){
console.log(this.props.arrival)
}

But I can put it in componentDidUpdate. I also realized that I can put it in a setInterval, then run that setInterval in componentDidMount.

componentDidMount() {

this.intervalFunc = setInterval(() => {
console.log(this.props.arrival);
}
  , 1000);

}

Why can I access this.props.arrival after putting it inside setInterval, but not outside of it?

Answer 1

I might be completely wrong, however: I believe your issue is based upon the fact that a React child cannot tell whether its' props have updated or not, which results in the component not re-rendering (and therefore inheriting the props). Using setInterval does propmt the component to update every x amount of seconds, however. Try setting the props as state in your child component using componentDidUpdate like below and see if it works

componentDidUpdate(prevProps) {
  if (prevProps !== this.props) {
    this.setState({arrival: this.props.arrival});
  }
}