我不能循环这个数组而不会出错（反应）

Question

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

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

有人可以帮助我吗？提前致谢。 附言对不起我糟糕的英语

这里是：

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

Answer 1

在渲染函数中移动persons_list。您将列表作为 handleSubmit 函数的一部分。

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>
    );
  }

//try something like this

import React, { Component } from "react";
import { render } from "react-dom";

class App extends Component {
  state = {
    name: "",
    surname: "",
    age: "",
    porsons: [],
  };

  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);
    this.setState({ persons: this.persons });
  };

  render() {
    console.log("App started");
    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.state.persons || []).map((person) => (
            <li>{person}</li>
          ))}
        </ul>
      </div>
    );
  }
}

render(<App />, document.querySelector("#app"));

Answer 2

您应该了解范围。您在handleSubmit 中使用的persons_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>
    );
  }