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

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 传递下来的道具。它看起来像这样：

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。

Answer 2

不确定它是否是整个解决方案，但替换

constructor(){
   super();
   this.state = {
       stuff=[]
   }
}

通过

constructor(){
   super();
   this.state = {
       stuff: []
   }
}

您在对象声明中有一个= 符号。