Arrays 我能'；t循环此数组而不出错（React）

我正在学习React，我刚刚学会获取输入值。我试着写一个代码来练习。我犯了一个我无法解决的错误。我什么都试过了：

• 我尝试将数组映射放入另一个函数中
• 我尝试使用return（但是React不是纯js，所以它不起作用）
• 我试图将贴图移到函数之外，但每次按Add按钮时都需要映射数组
• 我试图用数组映射覆盖persons变量

有人能帮我吗？提前谢谢。 顺便说一句，对不起，我的英语很糟糕

这是：

import './App.css';
import React from 'react'

class App extends React.Component {

  state = {
    name: '',
    surname: '',
    age: '',
  };

  persons = []

  getName = (e) => {
    this.setState({name: e.target.value})
  }

  getSurname = (e) => {
    this.setState({surname: e.target.value})
  }

  getAge = (e) => {
    this.setState({age: e.target.value})
  }

  handleSubmit = (e) => {
    e.preventDefault()
    const name = this.state.name
    const surname = this.state.surname
    const age = this.state.age
    this.persons.push(name + ' ' + surname + ', ' + age)
    const persons_list = this.persons.map((person) =>
        <li>{person}</li>
    );
  }

  render ()  {
    return (
      <div className='container'>
        <h1 className='title'>React Database</h1>
        <form action="">
          <input type="text" placeholder='Name' className='name' onChange={this.getName} />
          <input type="text" placeholder="Surname" className='surname' onChange={this.getSurname} />
          <input type="text" placeholder="Age" className='age' onChange={this.getAge} />
          <button className='add_btn' onClick={this.handleSubmit}>Add</button>
          <button className='delete_btn' onClick={this.persons.pop()}>Delete</button>
        </form>
        <ul>{this.persons_list}</ul>  // the error is here: I can't use a variable inside a function
      </div>
    );
  }
}

export default App

import'/App.css'；
从“React”导入React
类应用程序扩展了React.Component{
状态={
名称：“”，
姓：''，
年龄：''，
};
人员=[]
getName=（e）=>{
this.setState（{name:e.target.value}）
}
GetLastname=（e）=>{
this.setState（{姓氏：e.target.value}）
}
getAge=（e）=>{
this.setState（{age:e.target.value}）
}
handleSubmit=（e）=>{
e、 预防默认值（）
const name=this.state.name
const姓氏=this.state.name
const age=this.state.age
this.persons.push（姓名+姓氏+年龄）
const persons\u list=this.persons.map（（person）=>
{个人}
);
}
渲染（）{
返回(
反应数据库
添加
删除
{this.persons\u list}
//错误在这里：我不能在函数中使用变量
);
}
}
导出默认应用程序

在渲染函数中移动人员列表。列表是handleSubmit函数的一部分

handleSubmit=（e）=>{
e、 预防默认值（）
const name=this.state.name
const姓氏=this.state.name
const age=this.state.age
this.persons.push（姓名+姓氏+年龄）
const persons\u list=this.persons.map（（person）=>
{个人}
);
}
//试试这样的
从“React”导入React，{Component}；
从“react dom”导入{render}；
类应用程序扩展组件{
状态={
姓名：“，
姓：“，
年龄：“，
porsons:[]，
};
人员=[]；
getName=（e）=>{
this.setState（{name:e.target.value}）；
};
GetLastname=（e）=>{
this.setState（{姓氏：e.target.value}）；
};
getAge=（e）=>{
this.setState（{age:e.target.value}）；
};
handleSubmit=（e）=>{
e、 预防默认值（）；
const name=this.state.name；
const姓氏=this.state.姓氏；
const age=this.state.age；
this.persons.push（姓名+“”+姓氏+”，“+年龄）；
this.setState（{persons:this.persons}）；
};
render（）{
console.log（“应用程序启动”）；
返回(
反应数据库
添加
删除

{（this.state.persons | |[]）.map（（person）=>(
{个人}
))}

);
}
}
render（，document.querySelector（#app”）您应该了解范围。您在
handleSubmit
中使用的
persons\u list
变量仅对
handleSubmit
可见，您应该将其移到函数之外，或者执行以下操作

render ()  {
    return (
      <div className='container'>
        <h1 className='title'>React Database</h1>
        <form action="">
          <input type="text" placeholder='Name' className='name' onChange={this.getName} />
          <input type="text" placeholder="Surname" className='surname' onChange={this.getSurname} />
          <input type="text" placeholder="Age" className='age' onChange={this.getAge} />
          <button className='add_btn' onClick={this.handleSubmit}>Add</button>
          <button className='delete_btn' onClick={this.persons.pop()}>Delete</button>
        </form>
        <ul>{this.persons.map((person) => <li>{person}</li>)}</ul>  // the error is here: I can't use a variable inside a function
      </div>
    );
  }

render（）{
返回(
反应数据库
添加
删除
{this.persons.map（（person）=>
{person}
）}
//错误在这里：我不能在函数中使用变量
);
}
错误是什么？是的，你是对的，但是像这样数组只映射一次。每次按下按钮我都想要阵列地图。非常感谢@platonic！现在可以了。