Javascript 在React中，是否可以使用child'；父级的多个组件中的Ajax JSON响应？

因此，通过Ajax调用，我知道您可以按如下方式输出数据：

import React, { Component } from 'react'

export default class ApiCategories extends Component {
    constructor(props) {
        super();
    }

    componentDidMount() {
        fetch('http://www.ajaxcall.com/page')
        .then(response => {
            if (response.ok) {
                var responseData = response.json();
                return responseData;
            } else {
                throw new Error('Something went wrong ...');
            }
        })
        .then(data => {
            this.setState({ data })
        })
        .catch (error => {
            console.log(error);
        });
    }
    render() {
        return (
            <OutputContent data = {this.state.data} />
        )
    }
}

function OutputContent({data}) {
    if (data && Array.isArray(data)) {
        let outputData = data.map((content) => {
            return (
            <div  key={content.Key}>
                <div>{content.Title}</div>
            </div>
            )
        })
        return outputData;
    } else {
        return <p>Loading Data</p>
    }
}

import React，{Component}来自“React”
导出默认类ApicCategories扩展组件{
建造师（道具）{
超级（）；
}
componentDidMount（）{
取（'http://www.ajaxcall.com/page')
。然后（响应=>{
if（response.ok）{
var responseData=response.json（）；
返回响应数据；
}否则{
抛出新错误（'出了问题…'）；
}
})
。然后（数据=>{
this.setState（{data}）
})
.catch（错误=>{
console.log（错误）；
});
}
render（）{
返回(
)
}
}
函数OutputContent（{data}）{
if（数据和数组.isArray（数据））{
让outputData=data.map（（内容）=>{
返回(
{content.Title}
)
})
返回输出数据；
}否则{
返回加载数据

}
}

但如果我想让父母多次使用这些细节，我就很难办了。 例如，在下面的示例中，父级会要求子级进行AJAX调用，该调用将返回响应。我只会进行一次API调用，然后在不同的组件中多次使用该数据，可能是通过隐藏返回的JSON对象等方式。我尝试过多种方法，例如返回null的导入并将其隐藏在localStorage中，但父对象的呈现通常在ajax调用完成之前输出。我的调用不一定需要在构造函数中，只是在本例中添加的

import React, { Component } from 'react'
import APICall from 'apiCall.js'

class OutputContent extends Component {
constructor(props) {
    super(props);

    // call the api and store the data
    // APICall.callData()

    this.state = { 
    itemDetails: {list items retrieved from ajax call}
    };
}

render() {
    var returnString = (
    <div className="App">
        <SelectBox listItems={this.props.data.itemDetails} /><br />
        <SelectBox listItems={this.props.data.itemDetails} /><br />
        <SelectBox listItems={this.props.data.itemDetails} /><br />
        <SelectBox listItems={this.props.data.itemDetails} /><br />
        <SelectBox listItems={this.props.data.itemDetails} /><br />
    </div>)
    return (returnString);
}
}

export default OutputContent;

import React，{Component}来自“React”
从“APICall.js”导入APICall
类OutputContent扩展组件{
建造师（道具）{
超级（道具）；
//调用api并存储数据
//APICall.callData（）
this.state={
itemDetails:{列出从ajax调用检索到的项目}
};
}
render（）{
var returnString=(










)
return（returnString）；
}
}
导出默认输出内容；

你说的“多次”是什么意思？您希望在浏览器刷新之间保持该数据，还是希望在另一个组件中使用该数据的副本？请参阅选择框示例，多次传递该数据。它不需要进行浏览器刷新，只需要在另一个组件中进行，这样AJAX调用就不会在一个页面上多次进行。问题更新希望澄清这一点。所以您希望能够在父级中获得一次数据，但将其作为道具传递给许多子级，这些道具将继续用作每个单独子级的状态？技术上是的。尽管我希望将ajax调用分开，并放在它自己的子对象中。（注意示例中的导入）基本上，父调用对子调用进行ajax调用，返回JSON响应，然后父调用将其传递给其组件。有道理？