子组件在数组响应本机时不更新

Question

我正在尝试更新具有父状态的道具的子组件。当用setstate()将父级的状态更改为my knowlage时，chlid应该重新执行。但是，当child位于数组中时，rerender不会Occure。我怎么才能修好？提前谢了。

class Child extends Component {
  render() {
    return(
      <Text>{this.props.state.isActive.toString()}</Text>
    )
  }
}

class Parent extends Component {

  state = {
    isActive: false
  }

  children = []


  constructor(props) {
    super(props)
    this.createChildren()
    this.changeState()
  }

  changeState() {
    this.change = setInterval(() => {
      if(this.state.isActive){
        this.setState({isActive: false})
      } else {
        this.setState({isActive: true})
      }
    }, 1000)
  }


  componentWillUnmount() {
    clearInterval(this.change)
  }

  createChildren() {
    for(let i=0; i<5; i++) {
      this.children.push(<Child key={i} state={this.state}/>)
    }
  }

  render() {
    return(
      <View>
        {this.children}
      </View>
    )
  }
}

我的app功能：

export default function App() {
  return (
    <View style={style.conteiner}>
      <Parent/>
    </View>
  );
} 

Answer 1

在呈现过程中应该始终创建React元素。不要将它们存储在属性或组件状态中：

  renderChildren = () => {
    children = [];

    for(let i=0; i<5; i++) {
      children.push(<Child key={i} state={this.state}/>)
    }

    return children;
  }

  render() {
    return(
      <View>
        {this.renderChildren()}
      </View>
    )
  }

您基本上总是呈现您在构造函数中创建的相同元素（这也是一种反模式）。