如何將ajax數據傳遞到組件的反應

我正在學習反應，並且有一個應用程序用於處理存儲在JavaScript對象中的靜態數據。我現在使用axios通過ajax加載數據。如何將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> 
    ); 
    } 
}

的一類。

來源

2017-01-12 mheavers

這應該有所幫助：https：//facebook.github.io/react/docs/context.html –

通常你只能傳遞組件需要的數據，這就是說，這正是什麼REDX是爲http：///redux.js.org/ – azium

爲了您的目的，您正在做的事情是完全可以接受的，我唯一要做的就是將狀態分解爲每個組件的對象。這會阻止每次更新每個組件時更新其中的一個組件。

當事情變得混亂時，您的孩子組件正在更新父母的狀態。這是像Flux或Redux這樣的圖書館派上用場的地方。

如果您只是創建一個簡單的應用程序與靜態數據不斷髮送狀態到您的組件作爲道具。

來源

2017-01-12 01:51:59 aaronw

如何將ajax數據傳遞到組件的反應

回答

相關問題