反应 setState 不更新

Question

I saw thousands post about it so I am a bit confuse, I did use arrow function, I binded my method changed for componentDidUpdate but I still can't manage to

in my async call setState my data and pass it to my child component.

ParentComponent

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeNav: 1,
      loading: true,
      data: []
    };
    this.fetchData = this.fetchData.bind(this);
  }

  fetchData = () => {
    var that = this;
    getMyData()
      .then(res => {
        console.log(res); // Output res Object
        that.setState({
          data: res
        })
      })
      .catch((error) => {
        console.log(error);
      });
  }

  componentDidUpdate = () => this.fetchData()

  render() {
    const { data, loading } = this.state;
 return (
      <>

            <ChildComponent data={this.data} loading={loading}/>
      </>
    );
  }
}

ChildComponent

class CurrentUp extends React.Component {
    constructor(props) {
        super(props);
    }
    componentDidUpdate = () => {
        console.log(this.props.data);   // Output []
        console.log(this.props.loading); // Output true
    }
}
render() {
        console.log(this.props.data);   // Output []
        console.log(this.props.loading); // Output true
        return (
             <div>
             </div>
        );
    }
}

What am I missing?

Solved , i am not sure how. I kept trying different stuff

Answer 1

You are console logging the data in the componentDidMount method. This method runs only once when a component is mounted. When you update the data in the parent component, and pass it to the child component, it doesn't re-create the entire component instance. Only the updates are passed down. You can access those updates in componentDidUpdate method. Or, if you are directly accessing props, you can log the data inside the render method.

class CurrentUp extends React.Component {
    constructor(props) {
        super(props);
    }

    render = () => {
        console.log(this.props.data);  
        console.log(this.props.loading);

        return null;
    }
}

Other points:

• You don't need to bind the function with this if you are using an arrow function.
• Inside the arrow function, it is safe to use the this keyword. No need of assigning it to that .

Answer 2

Try to bring some more code cause I see the child component you posted is an instead current up component. Send the real child component and then move the var in your fetchData function to the constructor.