Reactjs 通过React显示数据

我将在div中单击并在多个项目中的另一个div中显示文本。 我得到了一系列数据，其中包含一个数组（json文件）中的一些对象，它将由react显示。代码将在

handlerule=（（e，element，I）=>{..}）之前完成。每个项目都有一个onClick函数
（{e=>this.handelrule（e，element，i）}）

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            OtherRooms: {},
            divVisibles: {},
            loadingVisible: {},
            resultRule: {},
        };
    }

    render() {
        const { data } = this.state;
        const renderHotel = data.map((item, i) => {
            return <div class="item">
                <div class="moreInfo" onClick={(e) => this.showDiv(e, item, i)}><span>show more data</span></div>
                <div key={i} className={`${!this.state.loadingVisible[i] ? "unvisible" : "visible"}`}>
                    <div id="ballsWaveG">
                    </div>
                </div>
                <div id="box-info" key={i} className={` ${!this.state.divVisibles[i] ? "unvisible" : "visible"}`}>
                    <div class="table">
                        {this.state.OtherRooms[i]}
                    </div>
                </div>
            </div>
        });
        return (
            <div>
                {renderHotel}
            </div>
        );
    }
    showDiv = (e, element, i) => {
        this.showLoading(e, element, i);
        setTimeout(() => {
            fetch('/json.bc', {
                method: 'POST'
            })
                .then(response => response.text())
                .then(text => {
                    var Maindata = JSON.parse(text.replace(/\'/g, '"'))
                    this.setState(prevState => ({
                        Details: {
                            ...prevState.Details,
                            [i]: this.renderDetails(Maindata, i),
                        },
                        divVisibles: { ...prevState.divVisibles, [i]: !prevState.divVisibles[i] },
                        loadingVisible: { ...prevState.loadingVisible, [i]: "" }
                    }))
                }).catch(error => console.error(error))

        }, 1000);

    }
    renderDetails(element, i) {
        var indents = [];
        indents.push(<div>
            <span>{this.renderRule(element, i)}</span>
            <div key={i} className={`${!this.state.loadingVisible[i] ? "unvisible" : "visible"}`}>
                <div id="ballsWaveG">
                </div>
            </div>
            <div key={i}>{this.state.resultRule[i]}</div>
        </div>

        )

        return (
            indents
        )
    }

    showLoading = (e, elem, val) => {
        this.setState(prevState => ({
            loadingVisible: { ...prevState.loadingVisible, [val]: !prevState.loadingVisible[val] }
        }))
    };

    renderRule(element, i) {
        return <span class="txtRul" onClick={e => this.handelruleRoom(e, element, i)}>Show Rule</span>
    }
    handelruleRoom = (e, element, i) => {
        var mainprovider = element.id.provider
        if (mainprovider == undefined) {
            return ''
        } else {
            this.showLoading(e, element, i);
            /////the loading whould not be shown //////
            setTimeout(() => {
                var return_rule = function () { ////This part will be done but the result will not be shown in class="resultRule" ///////
                    var tmp = null;
                    $.ajax({
                        'async': false,
                        'type': "POST",
                        'global': false,
                        'dataType': 'html',
                        'url': "rule.bc",
                        'data': { 'mainprovider': JSON.stringify(mainprovider), },
                        'success': (response) => {
                            tmp = response;
                        }
                    });

                    return tmp;
                }();
                return this.setState(prevState => ({
                    resultRule: { ...prevState.resultRule, [i]: return_rule }, ///In this part return_rule does not set in resultRule ////
                    loadingVisible: { ...prevState.loadingVisible, [i]: "" }
                }))

            }, 1000);
        }
    }
}

ReactDOM.render(<App />, document.getElementById('Result')); 

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
其他房间：{}，
可访问分区：{}，
加载可见：{}，
结果列：{}，
};
}
render（）{
const{data}=this.state；
const renderHotel=data.map（（项目，i）=>{
回来
this.showDiv（e，item，i）}>显示更多数据
{this.state.OtherRooms[i]}
});
返回(
{renderHotel}
);
}
showDiv=（e，元素，i）=>{
这是指加载（e，元素，i）；
设置超时（（）=>{
获取（'/json.bc'{
方法：“发布”
})
.then（response=>response.text（））
。然后（文本=>{
var Maindata=JSON.parse（text.replace（/\'/g'”））
this.setState（prevState=>({
详情：{
…请说明详细信息，
[i] ：this.renderDetails（主数据，i），
},
divVisibles:{…prevState.divVisibles[i]：！prevState.divVisibles[i]}，
loadingVisible:{…prevState.loadingVisible，[i]：“”
}))
}).catch（错误=>console.error（错误））
}, 1000);
}
renderDetails（元素，i）{
var缩进=[]；
压入(
{this.renderRule（元素，i）}
{this.state.resulture[i]}
)
返回(
缩进
)
}
显示加载=（e，elem，val）=>{
this.setState（prevState=>({
loadingVisible:{…prevState.loadingVisible[val]：！prevState.loadingVisible[val]}
}))
};
renderRule（元素，i）{
返回此.handleruleroom（e，element，i）}>Show-Rule
}
handelruleRoom=（e，元素，i）=>{
var mainprovider=element.id.provider
if（mainprovider==未定义）{
返回“”
}否则{
这是指加载（e，元素，i）；
/////无法显示装载情况//////
设置超时（（）=>{
var return_rule=function（）{///将完成此部分，但结果不会显示在class=“resulture”中///////
var-tmp=null；
$.ajax({
“异步”：false，
“类型”：“发布”，
“全局”：错误，
“数据类型”：“html”，
“url”：“rule.bc”，
'data'：{'mainprovider'：JSON.stringify（mainprovider），}，
“成功”：（响应）=>{
tmp=响应；
}
});
返回tmp；
}();
返回此.setState（prevState=>({
resultRule:{…prevState.resultRule[i]：return\u rule}，///在这部分中，return\u rule未在resultRule中设置////
loadingVisible:{…prevState.loadingVisible，[i]：“”
}))
}, 1000);
}
}
}
ReactDOM.render（，document.getElementById（'Result'）；

实际上，此部分存在问题。setState（prevState=>（{…}）

您的handelruleRoom函数在其范围内没有声明索引

因此，您只需找出handleruleroom函数中的index是什么，这可能是您称之为的最后一个参数-i

尝试将索引更改为i 像这样

this.showLoading(e, DetailsRoomJ, i);
// and also here
return this.setState(prevState => ({
      resultRule: { ...prevState.resultRule, [i]: return_rule },
      loadingVisible: { ...prevState.loadingVisible, [i]: "" }
}))

另外，如果你在意的话，这段代码有很多地方不对劲

• 类应该是className
• 您确定需要同步功能吗（因为在收到响应之前您会阻止浏览器）

---

您的代码中存在不少问题。我将尽我所能指出这些问题并展示替代方案，这不仅是为了批评您，也是为了帮助您学习

您正在使用相当多的状态值。请考虑您试图解决的问题，并确定完成此任务所需的最小可能状态。例如，您当前在状态中处理的一些条件渲染可以卸载到渲染方法本身，使用三元运算符渲染加载组件（如果需要）状态值未定义

render() {
  <div>
    {
      !this.state.value
      ? <Loading />
      : this.state.value
    }  
  </div>
}

因为这个showDiv方法本身是异步的，所以当您在顶级代码中调用它时，您需要链接一个.then（），并在它之后添加额外的代码，以确保新状态继续生效

render() {
  // Note that you cannot use await in this top-level code
  showDiv.then(() => {
    // The rest of your code that relies on the state set in showDiv
  }).catch(err => console.error(err));
}

您只需将包含数据的文件直接导入应用程序，就可以省去处理异步操作的麻烦。您需要使用fetch（）的唯一原因是，如果您从单独的后端获取数据（例如，如果您的数据库和REST API有单独的服务器）。否则，您可以将这些文件与其他文件一起拉入客户端捆绑包：

React的强大之处在于它基于组件的模型

render() {
  // Note that you cannot use await in this top-level code
  showDiv.then(() => {
    // The rest of your code that relies on the state set in showDiv
  }).catch(err => console.error(err));
}

// Use whatever the relative path is to these files
import data from "./json.bc";
import rules from "./rules.bc";