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

Question

我正在学习 React，并且有一个应用程序用于处理存储在 javascript 对象中的静态数据。我现在正在使用 axios.

通过 ajax 加载该数据

这行得通，我目前将该数据存储在应用程序的状态中，然后在加载数据后将其传递给组件，但是我将数据作为道具传递给每个组件的方式并没有'感觉不对。

每个组件如何在不将其作为 prop 传递给每个组件的情况下访问父应用程序的数据？

这是我的代码

    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>
    );
  }
}

class.

Answer 1

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

当您的子组件更新父组件的状态时，事情就会变得混乱。这就是像 Flux or Redux 这样的库派上用场的地方。

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

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

how to pass ajax data down to components in react

javascript

ajax

reactjs

components

axios