Reactjs 在react中设置数据

我有一系列数据，在一个数组（json文件）中包含一些对象，它将在React中显示。主要问题是调用

renderDetails

。 当我在

renderInfo

中直接调用

this.renderDetails（element，I）

时，一切正常，并且

var text=element.Ruletext

将显示在

resulture

中。但是当在

showDiv=（e，element，i）=>{..

函数中调用

renderDetails

时，

var text=element.Ruletext

将不会显示在

resulture

中

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

    render() {
        const { data } = this.state;
        const renderInfo = 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
                        id="box-info"
                        key={i}
                        className={` ${!this.state.divVisibles[i] ? "unvisible" : "visible"}`}
                    >
                        <div class="table">{this.state.DetailsInfo[i]}</div>
                    </div>
                </div>
            );
        });
        return <div>{renderInfo}</div>;
    }
    DetailsInfo = i => {
        this.setState(prevState => ({
            divVisibles: { ...prevState.divVisibles, [i]: !prevState.divVisibles[i] }
        }));
    };
    showDiv = (e, element, i) => {
        this.setState(prevState => ({
            DetailsInfo: { ...prevState.DetailsInfo, [i]: this.renderDetails(element, i) },
            divVisibles: { ...prevState.divVisibles, [i]: !prevState.divVisibles[i] }
        }));
    };
    renderDetails(element, i) {
        var indents = [];
        indents.push(
            <div>
                <span>{this.renderRule(element, i)}</span>
                <div key={i} class="resultRule">
                    {this.state.resultRule[i]}
                </div>
            </div>
        );

        return indents;
    }

    renderRule(element, i) {
        return (
            <span class="txtRul" onClick={e => this.handelrule(e, element, i)}>
                show rule text
            </span>
        );
    }
    handelrule = (e, element, i) => {
        var text = element.Ruletext;
        this.setState(prevState => ({
            resultRule: { ...prevState.resultRule, [i]: text } ///In this part text does not be set in resultRule ////
        }));
    };
}
ReactDOM.render(<App />, document.getElementById("Result"));

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
详细信息信息信息：{}，
可访问分区：{}，
结果列：{}
};
}
render（）{
const{data}=this.state；
const renderInfo=data.map（（项目，i）=>{
返回(
this.showDiv（e，item，i）}>
显示更多数据
{this.state.DetailsInfo[i]}
);
});
返回{renderInfo}；
}
DetailsInfo=i=>{
this.setState（prevState=>({
divVisibles:{…prevState.divVisibles[i]：！prevState.divVisibles[i]}
}));
};
showDiv=（e，元素，i）=>{
this.setState（prevState=>({
DetailsInfo:{…prevState.DetailsInfo[i]：this.renderDetails（元素，i）}，
divVisibles:{…prevState.divVisibles[i]：！prevState.divVisibles[i]}
}));
};
renderDetails（元素，i）{
var缩进=[]；
压入(
{this.renderRule（元素，i）}
{this.state.resulture[i]}
);
返回缩进；
}
renderRule（元素，i）{
返回(
这个.handelrule（e，元素，i）}>
显示规则文本
);
}
handelrule=（e，元素，i）=>{
var text=element.Ruletext；
this.setState（prevState=>({
resultRule:{…prevState.resultRule[i]：text}///在该部分中，文本未在resultRule中设置////
}));
};
}
render（，document.getElementById（“结果”）；

这可能是因为在DetailsInfo中，传递给renderDetails的“This”的引用是DetailsInfo，而不是类This reference。 试着用这个

     showDiv = (e, element, i) => {
         const classRef=this;
         this.setState(prevState => ({
             DetailsInfo: { ...prevState.DetailsInfo, [i]: 
             this.renderDetails(element, i).bind(classRef)
             },
             divVisibles: { ...prevState.divVisibles, [i]: 
             !prevState.divVisibles[i] }
         }));
     };

---

这可能是因为在DetailsInfo中，传递给renderDetails的“This”的引用是DetailsInfo，而不是此类引用。 试着用这个

     showDiv = (e, element, i) => {
         const classRef=this;
         this.setState(prevState => ({
             DetailsInfo: { ...prevState.DetailsInfo, [i]: 
             this.renderDetails(element, i).bind(classRef)
             },
             divVisibles: { ...prevState.divVisibles, [i]: 
             !prevState.divVisibles[i] }
         }));
     };

---

如果您可以创建一个工作代码段进行测试，那么调试和发现问题就会更容易。尝试codesandbox或codepen。还有

元素的定义位置。Ruletext

在哪里？

Ruletext

属性似乎没有在任何地方定义，因此我希望

text=undefined

Hi@Keno Clayton

Ruletext

是我的json文件中对象的名称<代码>文本将是动态的，但如果我将静态值而不是

文本

，则不会在

resultRule

中设置它resultRule:{…prevState.resultRule，[i]：'test'}`如果您可以创建一个工作代码段进行测试，那么调试和发现问题就会更容易。尝试codesandbox或codepen。还有

元素的定义位置。Ruletext

在哪里？

Ruletext

属性似乎没有在任何地方定义，因此我希望

text=undefined

Hi@Keno Clayton

Ruletext

是我的json文件中对象的名称<代码>文本将是动态的，但如果我将静态值而不是

文本

，则不会在

resultRule

中设置它resultRule:{…prevState.resultRule，[i]：'test'}`Hi@Vinay Goyal。我试过了。出现此错误：

\u this.renderDetails（…）.bind不是函数

@bita实际上需要在构造函数中绑定它<代码>this.renderDetails=this.renderDetails.bind（this）抱歉，我刚才在这里犯了一个错误。renderDetails（元素，I）。bind（classRef），而不是上面尝试使用：this.renderDetails.bind（classRef，元素，I）现在

renderDetails

为空。没有结果。@bin，我刚刚使用了您的代码，并提供了数据={Ruletext:'the rule text'}]为了最初的渲染目的，然后尝试运行代码，我得到了resulturehi@Vinay Goyal的{0:“规则文本”}。我试过了。出现此错误：

\u this.renderDetails（…）.bind不是函数

@bita实际上需要在构造函数中绑定它<代码>this.renderDetails=this.renderDetails.bind（this）抱歉，我刚才在这里犯了一个错误。renderDetails（元素，I）。bind（classRef），而不是上面尝试使用：this.renderDetails.bind（classRef，元素，I）现在

renderDetails

为空。没有结果。@bin，我刚刚使用了您的代码，并提供了数据={Ruletext:'the rule text'}]为了最初的呈现目的，然后尝试运行代码，我得到了resulture的{0:“规则文本”}