状态更改时子组件的道具不更新

Question

I'm using drag and drop to instantiate react classes, but for some reason the state from the parent component is not being passed to the child. The child isn't even being rerendered, tried shouldComponentUpdate and componentWillReceiveProps.

Parents relevant code:

dragEnd(e) {
    e.preventDefault();
    let me = this;

    let el = (
        <Pie key={ Date.now() * Math.random() } yAxisData={ me.state.yAxisData } legendData={ me.state.legendData } />
    )

    this.setState({
        cells: this.state.cells.concat(el),
    });
}

So, on drop, is created, and then render looks like:

render() {
    <div className = { "insights-data" } onDrop={ this.dragEnd } onDragOver={ this.preventDefault }>
        { this.state.cells }
    </div>
}

All this works fine, but now when I change the data passed to this.state.yAxisData and/or this.state.legendData, it's not calling render on the child component.

Here's the child components render:

    render() {
    return (
        <div className="insights-cell">
            <ReactECharts
                option={ this.create() }
                style={{ position: "absolute", top: 0, bottom: 0, left: 0, right: 0, height: "100%" }}
                theme="chalk"
                notMerge={ true }
            />
        </div>
    )
}

Any ideas? I thought maybe there was a binding issue, but that doesn't seem to be it, as I'm using me = this. It's not even re-rendering the child component.

Answer 1

You are already creating the element in dragEnd function by passing props to it and storing them to an array. Therefore the array this.state.cells contain the array of already declared elements. Therefore it cannot update on state change. You should render a new array of element on every render.

Just push some necessary detail of dragged element in this.state.cells and then iterate through this array on every render.

dragEnd(e) {
    e.preventDefault();

    let el = draggedElementType

    this.setState({
        cells: this.state.cells.concat(el),
    });
}

And in render, iterate through this array and return the desired element.

render() {
    <div className = { "insights-data" } onDrop={ this.dragEnd } onDragOver={ this.preventDefault }>
        { this.state.cells.map((cell, index) => {
           if (cell === "pie") {
           return (<Pie key={index} yAxisData={ me.state.yAxisData } legendData={ me.state.legendData } />);
           }
           else if (){...
        )}
    </div>
}