reactjs - 从 mongoDB 获取数据、setstate 并将 props 传递给子组件不起作用

Question

下面是我的代码

class Root extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
    }
  }

  componentDidMount() {
    this.getDataFromDb();
  }

  getDataFromDb = () => {
    fetch('http://localhost:3001/getData')
      .then((data) => data.json())
      .then((res) => {
        if(res !== this.state.data) {        
          this.setState({ data: res}, () => console.log(this.state.data));
        }
      });
  };

  render() {
    return(
      <div>
        <IRPage data={this.state.data}></IRPage>
      </div>
    )
  }
}

class IRPage extends Component {

  print = () => {
    console.log(this.props.data);
  }

  render() {
    return (
      <div className="container m-5">
        <button onClick={this.print}></button>
      </div>
    )
  }
}

Root组件中getDatafromDB中setstate的回调函数工作成功， 但是当它传递给子组件 IRPage 并单击打印按钮时，结果是未定义的。 谢谢您的帮助

Answer 1

您的代码似乎按您的预期工作。

我尝试复制你写的内容并且它有效。结账这个jsfiddle

class Root extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
    }
  }

  componentDidMount() {
    this.getDataFromDb();
  }

  getDataFromDb = () => {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then((data) => data.json())
      .then((res) => {
        if(res !== this.state.data) {        
          this.setState({ data: res}, () => console.log(this.state.data));
        }
      });
  };

  render() {
    return(
      <div>
        <IRPage data={this.state.data}></IRPage>
      </div>
    )
  }
}

// here I have added React to import Components from, because I don't know what import statement is
class IRPage extends React.Component {

  print = () => {
    console.log(this.props.data);
  }

  render() {
    return (
      <div className="container m-5">
        <button onClick={this.print}></button>
      </div>
    )
  }
}

ReactDOM.render(<Root />, document.querySelector("#app"))