儿童不更新时，通过阵列产生反应

Question

我做了一个简单的反应，我在哪里通过一个数组，它是我的国家内部产生的子组件的应用程序：

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> 
    ); 
    } 
} 

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> 
     ); 
    } 
} 

我的孩子的渲染，但是当我在我的孩子的一个更新通过的onClick状态，状态更新（你可以检查它，当您在“updateState”的方法CONSOLE.LOG学校），但我的c hilds不会被重新提交。

这是怎么回事，为什么？你能像这样创建孩子吗（通过状态数组）？

谢谢！

Answer 1

原因是，你存储UI items在全局变量，那就是不会得到更新，因为constructor获得初始rendering期间只调用一次。而不是那maprender方法，它将工作，并从constructor也删除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> 
    ); 
    } 

为什么它会工作：在setStateReact将触发re-rendering，它会根据更新state值创建新ui-items。