当父组件在反应中更新其数组时，子组件未更新

Question

我在父反应组件中有一个项目列表，我在其中添加了新项目和更新项目。子组件将接收道具中的项目并渲染它。

当父状态正在更新时，子组件不会更新其值。 我是否需要在“componentWillReceiveProps”中更新子组件状态？正确的做法是什么。

Code Example 
// parent component 
import React, { Component } from "react";
import TestList from '../controls/testlistview'

export default class TestView extends Component {
    constructor(props) {
        super();
        this.state = {
            items: []
        };
    }

    render() {
        return (<div>
            <button onClick={this.addItem.bind(this)}> Add item</button>
            <button onClick={this.changeFirstItemText.bind(this)}> Change item</button>
            <TestList items={this.state.items} index={index}/>
        </div>);
    }

    addItem() {
        var items = this.state.items.map(s=> s);

        items.push('new one');
        this.setState({
            items: items
        });
    }



    changeFirstItemText() {
        var items = this.state.items.map(s=> s);
        items[0] = "changed text";
        this.setState({
            items: items
        });
    }
}



//Child component
import React, { Component } from "react";

export default class TestList extends Component {
    constructor(props) {
        super();
        debugger;
        this.state = {
            rootNodes: props.items
        };
    }

    componentWillReceiveProps(nextProps){
        debugger;
    }

    render() {
        var items = this.state.rootNodes.map((s) => {
            return <div>{s}</div>;
        });
        return <div>{items}</div>;
    }
}

Answer 1

代替

render() {
        var items = this.state.rootNodes.map((s) => {
            return <div>{s}</div>;
        });
        return <div>{items}</div>;
    }

你从道具中获得物品

render() {
        var items = this.props.items.map((s) => {
            return <div>{s}</div>;
        });
        return <div>{items}</div>;
    }

您不必再次将 props 分配给 TestList 状态，否则您需要再次从 TestList 执行 setState() 才能再次触发渲染。 （这不是必要的步骤）

http://codepen.io/kossel/pen/ObQLoR

Answer 2

在 TestList 类中，您不应该将 props 分配给组件的状态 - 这是在 React 中引起重大问题的可靠方法，也是您出现问题的原因。请参阅 my answer here 了解为什么这是一个坏主意。

如果您将您的 TestItem 更改为以下内容，那么它应该可以正常工作。

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

    componentWillReceiveProps(nextProps){
        debugger;
    }

    render() {
        var items = this.props.items.map((s) => {
            return <div>{s}</div>;
        });
        return <div>{items}</div>;
    }
}

Answer 3

原因是您正在通过子组件的状态创建 ui 元素。 有两种方法可以解决这个问题：
1. 像这样更新componentWillReceiveProps()函数中的状态值

 componentWillReceiveProps(newProps){
        this.setState({
            rootNodes: newProps.items
        });
}

2.像这样直接从props值创建ui元素-

render() {
    var uiItems = this.props.items.map((item) => {
        return <div>{item}</div>;
    });
    return (<div>{uiItems}</div>);
}