Question

我有一个zones列表，我想显示。现在我创建了一个简单的测试。在按钮上单击一个虚拟条目应添加到列表中。正在更新变量，但列表组件不显示新条目。

这是我的代码：

import React, { Component } from 'react';
import FreightList from './FreightList';
import ZoneList from './ZoneList';

class FreightCapture extends Component {

    constructor(props) {
        super(props);
        this.state = {
            freights: props.freights,
            zones: [{ID:"1",Fracht_ID:"2",Gebiet_von:"test"}],
            freightListId: 1,
            zoneListId: 2
        };
    }

    testOnClick(event) {
        event.preventDefault();
        let newEntry = [{ID:"2",Fracht_ID:"2",Gebiet_von:"test test"}];
        this.setState({
            zones: this.state.zones.concat(newEntry)
        })
    }

    render() {
        return (
            <div>
                <FreightList freights={this.state.freights} parent={this} key={this.state.freightListId} />

                <ZoneList zones={this.state.zones} key={this.state.zoneListId} />
                <button onClick={this.testOnClick.bind(this)}>Test</button>
            </div>
        );
    }
}

export default FreightCapture

ZoneList.js：

import React, { Component } from 'react';
import Zone from './Zone';

class ZoneList extends Component {

    constructor(props) {
        super(props);
        this.state = {
            zones: props.zones
        };
    }

    handleFreightClick(event) {

    }

    render() {
        return (
            <div className="panel panel-default">
                <div className="panel-heading">
                    Zones
                </div>
                <div className="panel-body">
                    <div className="table-responsive">
                        <table className="table table-hover table-striped">
                            <thead>
                                <tr>
                                    <th className="padding5px">ID</th>
                                    <th className="padding5px">Fracht_ID</th>
                                    <th className="padding5px">Land_Nr</th>
                                    <th className="padding5px">Gebiet_von</th>
                                    <th className="padding5px">Gebiet_bis</th>
                                    <th className="padding5px">Suchart_Nr</th>
                                    <th className="padding5px">Zone_Nr</th>
                                    <th className="padding5px">Zonen</th>
                                </tr>
                            </thead>
                            <tbody>
                            {
                                this.state.zones.map((zone)=> {
                                  return (
                                    <Zone zone={zone} key={zone.id} />
                                  );
                                })
                            }
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        );
    }
}

export default ZoneList

Zone.js：

import React, { Component } from 'react';

class Zone extends Component {

    constructor(props) {
        super(props);
        this.state = {
            zone: props.zone
        };
    }

    render() {
        return (

                <tr className="cursorPointer">
                    <td>
                        <div className="checkbox">
                          <label>
                            <input type="checkbox" value="" />
                          </label>
                        </div>
                    </td>
                    <td>
                        { this.state.zone.ID }
                    </td>
                    <td>
                        { this.state.zone.Fracht_ID }
                    </td>
                    <td>
                        { this.state.zone.Gebiet_von }
                    </td>
                    <td>
                        { this.state.zone.Gebiet_bis }
                    </td>
                    <td>
                        { this.state.zone.Land_Nr }
                    </td>
                    <td>
                        { this.state.zone.Suchart_Nr }
                    </td>
                    <td>
                        { this.state.zone.Zone_Nr }
                    </td>
                    <td>
                        { this.state.zone.Zonen }
                    </td>
                </tr>

        );
    }
}

export default Zone

当我点击按钮时，我可以看到变量正在更新，但显示列表的组件未显示新条目。为什么？

Answer 1

当子组件使用本地state时，您应该在收到的每个新道具上更新state。你可以用componentWillReceiveProps

来做到这一点

对您的评论进行跟进：
是的，＆＃34;映射的每个组件＆＃34;它收到的本地州props应该在收到的每个新props上设置其状态我想我可以看到你感到困惑的地方，你在props电话中将state映射到constructor，但不要忘记，构造函数只调用 ONCE 即可。
每次render更改都会调用state，但您不会更改状态，因此它不会重新启动：自我渲染。
收到新props时，更改状态的方法是componentWillReceiveProps 话虽如此，我真的建议尽可能使用没有stateless或生命周期方法的state组件。
我建议Cory House阅读this post关于无状态组件的好处

React - 为什么组件没有更新

1 个答案: