Question

例如，我有5个组件，第一个组件是其余的父组件（作为子组件），API的所有数据/响应是否都存储在父组件中，然后传递给子组件？还是每个子组件都有一个状态来保存来自API的数据/响应？或相反亦然？所以每个组件都有自己的状态

export class Home extends Component {
  constructor(props){
    super(props)
    this.state = {
      dataComponentChild1: [],
      dataComponentChild2: [],
      dataComponentChild3: [],
      dataComponentChild4: [],
    }
  }

  async componentDidMount(){
    await Api.post('/example1-endpoint')
    await Api.post('/example2-endpoint')
    await Api.post('/example3-endpoint')
    await Api.post('/example4-endpoint')
    .then((response) => {
      const responseJson = response
      if (responseJson.data.STATUS_CODE === '200') {
        this.setState({
          dataComponentChild1: responseJson.data,
          dataComponentChild2: responseJson.data,
          dataComponentChild3: responseJson.data,
          dataComponentChild4: responseJson.data,
        });
      }
    })
  }

  render() {

    const {dataComponentChild1,dataComponentChild2,dataComponentChild3,dataComponentChild4} = this.state

    return (
      <React.Fragment>
        <Component1 props1 = {dataComponentChild1} />
        <Component2 props2 = {dataComponentChild2} />
        <Component3 props3 = {dataComponentChild3} />
        <Component4 props4 = {dataComponentChild4}/>
      </React.Fragment>
    )
  }

，如果我想同时发布/到达多个端点怎么办？我上面的方法正确吗？

对没有子组件的父组件做出反应

0 个答案: