兒童不更新時，通過陣列產生反應

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。