×
  • 反应– The Complete Guide (incl. 反应Router 4 & Redux)

  • 23 – Maintain Lists State In 反应

    课程清单
    [在React中维护列表状态,在React中维护列表状态]

    在上一课中,我们通过将数组映射到具有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.

    src / Person / Person.js
    
    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.

    src / Person / Person.js
    
    ...
    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 指数 在数组中。

    JS地图方法
    
    [1,2,3].map((item, 指数) => { console.log(`${index})  ${item}`) });
    
    注意:
    如果您在ES6箭头函数中使用更多一个参数,则必须将这些参数包装在括号中,即()

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

    src / App.js
    
    ...
    {
      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.

    src / App.js
    
    ...
    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

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

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

    反应introduction
    反应Component
    在React中维护列表状态
  • 启用通知    不用了,谢谢