Javascript 通过数组react生成时，子级不更新

我制作了一个简单的react应用程序，通过我所在州的数组生成子组件：

School.js：

import React from 'react';
import Person from './Person';

export default class School extends React.Component {
  constructor() {
    super();
    this.state = {
      persons: [
        {id: 0, name: "person0"},
        {id: 1, name: "person1"},
        {id: 2, name: "person2"},
        {id: 3, name: "person3"},
        {id: 4, name: "person4"},
        {id: 5, name: "person5"},
        {id: 6, name: "person6"},
        {id: 7, name: "person7"},
        {id: 8, name: "person8"},
        {id: 9, name: "person9"}
      ]
    };

    this.personList = this.state.persons.map((p) =>
      <Person key={p.id} info={p} updateState={this.updateState.bind(this)} />
    );
  }

  updateState(){
    this.setState({
      persons: [
        {id: 0, name: "person000000000"},
        {id: 1, name: "person100000000"},
        {id: 2, name: "person200000000"},
        {id: 3, name: "person300000000"},
        {id: 4, name: "person400000000"},
        {id: 5, name: "person500000000"},
        {id: 6, name: "person600000000"},
        {id: 7, name: "person700000000"},
        {id: 8, name: "person800000000"},
        {id: 9, name: "person900000000"}
      ]
    });
    console.log(this.state);
  }

  render() {
    return (
      <div>
        <h1>All my persons:</h1>
        <ul>
          {this.personList}
        </ul>
      </div>
    );
  }
}

从“React”导入React；
从“./人”导入人；
导出默认的类。组件{
构造函数（）{
超级（）；
此.state={
人员：[
{id:0，名称：“person0”}，
{id:1，名称：“person1”}，
{id:2，姓名：“person2”}，
{id:3，名字：“person3”}，
{id:4，名字：“person4”}，
{id:5，姓名：“person5”}，
{id:6，名字：“person6”}，
{id:7，姓名：“person7”}，
{id:8，姓名：“person8”}，
{id:9，名字：“person9”}
]
};
this.personList=this.state.persons.map（（p）=>
);
}
房地产（）{
这是我的国家({
人员：[
{id:0，名称：“person000000000”}，
{id:1，名称：“person100000000”}，
{id:2，姓名：“person200000000”}，
{id:3，姓名：“person300000000”}，
{id:4，姓名：“person400000000”}，
{id:5，姓名：“person500000000”}，
{id:6，姓名：“person600000000”}，
{id:7，姓名：“person70000000”}，
{id:8，姓名：“person80000000”}，
{id:9，姓名：“person900000000”}
]
});
console.log（this.state）；
}
render（）{
返回(
我所有的人：

{this.personList}

);
}
}

Person.js：

import React from 'react';

export default class Person extends React.Component {
    constructor(){
        super();
    }

    componentDidUpdate(){
        console.log("updated");
    }

    render(){
        return(
            <p onClick={this.props.updateState}>I'm {this.props.info.name} and my id is {this.props.info.id}</p>
        );
    }
}

从“React”导入React；
导出默认类Person.Component{
构造函数（）{
超级（）；
}
componentDidUpdate（）{
控制台日志（“更新”）；
}
render（）{
返回(
我是{this.props.info.name}，我的id是{this.props.info.id}
);
}
}

我的孩子会被呈现，但当我通过onClick在其中一个孩子上更新状态时，状态会被更新（你可以在学校的console.log'updateState'方法中进行检查），但我的孩子不会被重新呈现

这是怎么发生的，为什么？您可以创建这样的子级（通过状态中的数组）

---

谢谢

原因是，您正在将

UI项

存储在全局变量中，而该项不会得到更新，因为

构造函数

在初始

呈现期间只被调用一次。与其在
render
方法中使用
map
方法，它将起作用，并从
构造函数中删除
map

像这样：

CreateList(){
   return this.state.persons.map((p) =>
      <Person key={p.id} info={p} updateState={this.updateState.bind(this)} />
    );
}

render() {
    return (
      <div>
        <h1>All my persons:</h1>
        <ul>
          {this.CreateList()}
        </ul>
      </div>
    );
  }

CreateList（）{
返回this.state.persons.map（（p）=>
);
}
render（）{
返回(
我所有的人：

{this.CreateList（）}

);
}

为什么工作：在
上设置状态
反应
将触发
重新呈现
，并根据更新的
状态
值创建新的
ui项