在上一课中，我们通过将数组映射到具有JSC元素的数组开始输出列表，这是在react中输出列表的常见模式。您只使用javascript，因为所有内容都是javascript。
现在我们还有一些需要改进的地方，例如：

will come back to that soon before i do that let’s see how we actually manipulate the Persons array and for that let me add a new click listener.
Inside our person components there we actually already have a click listener on the first paragraph and there we have execute the click prompt, prior to our change there we then call the switchNameHandler in src / App.js

列出React中的状态

Now we will remove that method I am not calling it anymore from anywhere in my application instead I want to add a new handler i’ll name it deletePersonHandler and you might be able to guess what this will do. I want to delete a person from my array of persons and I want to execute this and we will ececute this wheen we click the first paragraph in a person component.

import 反应from 'react';
import './Person.css';
const person = props => {
	return (
		<div className="Person">
			<p onClick={props.click}> {/* on click will execute the deletePersonHandler method */}
				I am a {props.name} and i am {props.age} year old!
			</p>
			 ...
		</div>
	);
};
export 默认 person;

因此，再次有一个点击道具被执行为方法。所以我应该在我的个人componenet中添加一个点击道具 src / App.js referencing to the deletePersonHandler.

...
deletePersonHandler = () => {};
render() {
	let persons = null;
	if (this.state.showPersons) {
		persons = (
			<div>
				{this.state.persons.map(person => {
					return <Person click={this.deletePersonHandler} name={person.name} age={person.age} />;
				})}
			</div>
		);
	}
  ...
}
...

now when I click the person I want to execute deletePersonHandler method and I want to delete that perticular person. For that I need to know which person is this, since since we output a dynamic list there.
The good thing is the map method also exposes a second argument. I can can receive an second argument the 指数 在数组中。

[1,2,3].map((item, 指数) => { console.log(`${index})  ${item}`) });

因此，我们会免费自动传递该索引，我想将其传递给 deletePersonHandler

...
{
  this.state.persons.map((person, 指数) => {
		return (
			<Person click={() => this.deletePersonHandler(index)} name={person.name} age={person.age} />
		);
	})
}
...

我将使用上面作为箭头函数执行的syntex，如上所示，然后我就可以传递索引了。
so now we can receive this in a deletePersonHandler method.

...
deletePersonHandler = personIndex => {
  const persons = this.state.persons;
  persons.splice(personIndex, 1);
  ...
};
...

the splice() removes one element from the array of the given 指数. then after I can call this.setState() and set the persons object

...
deletePersonHandler = personIndex => {
  const persons = this.state.persons;
  persons.splice(personIndex, 1);
  this.setState({persons:persons});
};
...

因此，我们将人员的状态设置为新人员，即已更新的人员，这种方法存在一个缺陷，我将尽快解决。
让我们尝试尽管保存文件并运行应用程序，直到现在，我们仍然会收到与以前相同的警告。
单击该段，确保我们实现的功能正常运行。但是，我说这种方法有一个缺陷，我将在下一课中深入探讨该缺陷。

反应introduction
反应Component