javascript - 如何在父组件中进行http调用setState，然后将状态发送给所有子组件？

Question

所以我尝试从父级的 componentDidMount() 调用 axios.get('{link here}') :

class Parent extends React.Component {
constructor(){
   super();
   this.state = {
       stuff: []
   }
}

componentDidMount() {
     axios.get({link})
     .then(res => {
         this.setState({stuff: res.data}) 
     }
}

render() {
    return(
    <Child stuff={this.state.stuff} />
    )
}

然后是Child各种子组件，其中一个是这样的:

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

    render() {
       return(
           //To access everything in the data of parent here in child component
       )    
}

即使父级在 console.log() 中显示数据，子级也没有收到任何内容

Answer 1

在Child类中，您可以访问使用this.props传递下来的 Prop 。它看起来像这样:

class Parent extends React.Component {

  state = {
    name: 'Felix'
  }

  render() {
    return (
      <Child name={this.state.name} />
    )
  }
}


class Child extends React.Component {

  render() {
    return <p>My Name is {this.props.name}</p>
  }
}

ReactDOM.render(<Parent />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

如果子组件不打算保存内部状态，那么您可以将其重构为功能组件:

function Child(props) {
  return <p>My Name is {props.name}</p>
}

有关函数和类组件的更多信息 here .