如何将ajax数据传递给react中的组件

Question

我正在学习反应，并且有一个应用程序用于处理存储在javascript对象中的静态数据。我现在使用axios通过ajax加载该数据。

这是有效的，我目前正在将这些数据存储在应用程序的状态，然后在加载数据后将其传递给组件，但我将数据作为道具传递给每个组件都感觉不对。

每个组件如何访问父应用程序的数据而不将其作为支柱传递给每个组件？

这是我的代码

    class App extends Component {

  constructor(props) {
    super(props);
    this.state = {appData: {}};
  }

  componentDidMount() {
    axios.get('/data/appData.json')
    .then((result)=> {
      const thisData = result.data;
      this.setState({
        appData: result.data
      });
    })
  }

  componentWillUnmount() {
    this.serverRequest.abort();
  }

  render() {

    const theData = this.state.appData;
    if (Object.keys(theData).length > 0 && theData.constructor === Object){ //if the object is not empty
      return (
        <div className="App">
          <AppHeader appData={theData} />
          <AppMenu appData={theData} />
          <MainCarousel appData={theData} />
          <HomeDetails appData={theData} />
          <Model3D appData={theData} />
          <AppMaps appData={theData} />
          <AppContact appData={theData} />
        </div>
      );
    } else {
      return (
        <div className="App"></div>
      )
    }

  }
}

使用数据的组件如下所示：

function AppHeader(props) {
  return (
    <div className="App-header">
      <h2 className="App-title">{props.appData.copy.title}</h2>
      <h4 className="App-subtitle">{props.appData.copy.subtitle}</h4>
    </div>
  );
}

表示功能，或

class MainCarousel extends Component {
  mixins: [Carousel.ControllerMixin];

  constructor(props) {
    super(props);
  }

  render() {
    const carouselItems = this.props.appData.carouselItems.map((carouselItem) =>
      <AppCarouselItem key={carouselItem.name.toLowerCase()} name={carouselItem.name} image={carouselItem.image} />
    );
    return (
      <div className="App-carousel">
        <Carousel autoplay={true} wrapAround={true}>
          {carouselItems}
        </Carousel>
      </div>
    );
  }
}

上课。

Answer 1

出于您的目的，您所做的事情是完全可以接受的，我唯一要改变的是将状态拆分为每个组件的对象。每次更新其中一个组件时，这将阻止每个组件更新。

当事情变得混乱时，你的孩子组件正在更新父母的状态。这就是像Flux或Redux这样的图书馆派上用场的地方。

如果您只是使用静态数据创建一个简单的应用程序，请继续将状态作为道具发送到您的组件。