小编pro*_*er1的帖子

setState 不重新渲染数组内的反应组件

我正在尝试创建一个反应应用程序,该应用程序在按下按钮时添加一个反应组件,然后重新渲染它。我使用 state 内部的 p 元素数组作为测试。事件处理函数使用 setState 来修改数组,但由于某种原因它不会重新渲染组件,因此更改(新元素)不会显示在屏幕上。我做错了什么?

import React, {Component} from "react";

export default class Agenda extends React.Component{

  constructor(props){

    super(props);

    this.list = [];

    this.state = {

      list:[]

    };

    this.addItem = this.addItem.bind(this);

    const items = ["Hola Mundo 1","Hola Mundo 2","Hola Mundo 3"];

    const itemComponent = items.map((item) => 
      <p>{item}</p>
    );

    this.list = itemComponent;
    this.state.list = itemComponent; 

  }

  addItem(){

    //Adds a new paragraph element at the end of the array
    this.list[3]= <p>Hola Mundo 4</p>;

    this.setState(

      {
        list: this.list
      }
    );

  }

  render(){


    return( …
Run Code Online (Sandbox Code Playgroud)

javascript web reactjs

0
推荐指数
1
解决办法
3082
查看次数

标签 统计

javascript ×1

reactjs ×1

web ×1