Javascript 反应-为什么组件没有被更新

我有一个要显示的

区域列表

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

这是我的密码：

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

import React，{Component}来自'React'；
从“/FreightList”导入货物清单；
从“/ZoneList”导入区域列表；
类FreightCapture扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
货物：道具，货物，
区域：[{ID:“1”，Fracht_ID:“2”，Gebiet_von:“test”}]，
货物编号：1，
地带性：2
};
}
testOnClick（事件）{
event.preventDefault（）；
让newEntry=[{ID:“2”，Fracht_ID:“2”，Gebiet_von:“test”}]；
这是我的国家({
区域：this.state.zones.concat（newEntry）
})
}
render（）{
返回(
试验
);
}
}
导出默认运费捕获

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

import React，{Component}来自'React'；
从“./区域”导入区域；
类ZoneList扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
区域：道具区域
};
}
handleFreightClick（事件）{
}
render（）{
返回(
地带
身份证件
压裂液
地皮
格比埃特冯
格比埃图比斯酒店
苏查特
区域编号
佐南
{
this.state.zones.map（（zone）=>{
返回(
);
})
}
);
}
}
导出默认区域列表

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

import React，{Component}来自'React'；
类区域扩展组件{
建造师（道具）{
超级（道具）；
此.state={
区域：道具区域
};
}
render（）{
返回(
{this.state.zone.ID}
{this.state.zone.Fracht_ID}
{this.state.zone.Gebiet_von}
{this.state.zone.Gebiet_bis}
{this.state.zone.Land_Nr}
{this.state.zone.Suchart_Nr}
{this.state.zone.zone_Nr}
{this.state.zone.Zonen}
);
}
}
导出默认区域

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

---

当子组件使用本地

状态时，应在收到的每个新道具上更新该
状态。你可以用它来做

您评论的后续内容：

是的，将收到的
道具映射到其本地状态的每个组件都应该在收到的每个新
道具上设置其状态。

我想我可以看出您在哪里感到困惑，您在
构造函数调用中将
道具映射到
状态
，但是不要忘记，构造函数只调用一次

render
将在每次
状态更改时被调用，但您没有更改状态，因此它不会重新：render it self.

当收到新的
props
时，更改状态的方法是使用
组件willreceiveprops


话虽如此，我还是建议尽可能使用无状态的组件，它既没有状态，也没有生命周期方法。

我建议阅读Cory House关于无状态组件好处的文章
当子组件使用本地
状态
时，您应该在收到的每个新道具上更新该
状态
。你可以用它来做

您评论的后续内容：

是的，将收到的
道具映射到其本地状态的每个组件都应该在收到的每个新
道具上设置其状态。

我想我可以看出您在哪里感到困惑，您在
构造函数调用中将
道具映射到
状态
，但是不要忘记，构造函数只调用一次

render
将在每次
状态更改时被调用，但您没有更改状态，因此它不会重新：render it self.

当收到新的
props
时，更改状态的方法是使用
组件willreceiveprops


话虽如此，我还是建议尽可能使用无状态的组件，它既没有状态，也没有生命周期方法。

我推荐我