我正在尝试创建一个反应应用程序,该应用程序在按下按钮时添加一个反应组件,然后重新渲染它。我使用 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)