Question

我有一系列数据，这些数据在一个数组（json文件）中包含一些对象，它将在React中显示。主要问题是调用renderDetails。当我直接在this.renderDetails(element, i)中调用renderInfo时，一切正常，并且var text=element.Ruletext将显示在resultRule中。但是，当在renderDetails函数中调用showDiv = (e,element,i) =>{....时，var text=element.Ruletext将不会显示在resultRule中。

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

Answer 1

这可能是因为在DetailsInfo中，传递给renderDetails的“ this”的引用是DetailsInfo而不是Class this引用。尝试使用它。

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

在反应中设置数据

1 个答案: