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更新我的一个孩子的状态时，状态会更新（你可以在学校中的console.log中使用updateState＆＃39;方法检查它），但是我的孩子没有被重新渲染。

这是怎么来的？为什么？你能创建这样的孩子吗（通过状态中的数组）？

谢谢！

Answer 1

原因，您将constructor存储在全局变量中，并且没有得到更新，因为rendering在初始map期间只被调用一次}。而不是在render方法中使用map，它会起作用，并从constructor中移除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> ); }。

像这样：

setState

为什么会有效：在React re-rendering上会触发ui-items，它会根据更新的{{{{}}创建新的state 1}}值。

通过阵列反应生成时，子项不会更新

1 个答案: