Question

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

当父状态更新时，子组件不会更新其值。我是否需要在＆＃34; componentWillReceiveProps＆＃34;中更新子组件状态中的状态？？这样做的正确方法是什么。

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类中，你不应该将道具分配给组件的状态 - 这是在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>;
    }
}

当父组件在响应中更新其数组时，子组件不更新

2 个答案: