javascript - 任何人都知道在ReactJS中编写此代码的简便方法

Question

我正在观看React教程，而讲师并没有很好地解释我理解的部分。他基本上是在尝试教如何在三个不同的输入框中动态呈现列表。在每个输入框中键入的内容都会渲染到其上方的相应div元素。并且讲师告诉我们，我们不应该直接触及该代码变得更加复杂的状态。有什么更简单的方法可以编写此代码？不了解他。讲师指示的代码在nameChangeHandler函数中。请参见下面的代码。谢谢！

import React, { Component } from 'react';
import './App.css';
import Person from "./Person/Person"

class App extends React.Component {

  state={
    persons: [
      {id: 1,name: "Max", age:28 },
      {id:2,name: "Manu", age: 29},
      {id:3, name: "Stephanie", age: 26 }
    ],
    showPersons: false
  }

  deletePersonHandler=(index)=> {
   const persons = [...this.state.persons];
   persons.splice(index, 1)
   this.setState({ persons: persons});
   console.log(persons)
  }

  nameChangedHandler = (e, id ) => {
    const personIndex = this.state.persons.findIndex(p=> {
      return p.id === id;
    })

    const person = {
      ...this.state.persons[personIndex]
    };

    person.name= e.target.value;

    const persons = [...this.state.persons];
    persons[personIndex] = person;

    this.setState({
      persons: persons
    })

  }

  togglePersonsHandler=()=> {
    const showing = this.state.showPersons;
    this.setState({ showPersons: !showing })
  }


  render() {

    const style={
      backgroundColor: "white",
      font:"inherit",
      border:"1px solid blue",
      padding:"8px",
      cursor:"pointer"
    }

    let persons=null;
    if(this.state.showPersons) {
      persons=(
      <div>
        {this.state.persons.map((person, index)=> {
          return(
            <Person 
              key={person.id}
              changed={(e)=>this.nameChangedHandler(e, person.id)}
              click={()=>this.deletePersonHandler(index)}
              name={person.name} 
              age={person.age}/>
          )
        })}
      </div>)
    }
    return (
      <div className="App">
        <h1>Hi, Im a React App</h1>
        <p>This is really working!!!</p>
        <button style={style} onClick={this.togglePersonsHandler}>Toggle Persons</button>
        {persons}
      </div>
    );
  }
}

export default App;

Answer 1

根据您在注释中的要求，这里是此代码的简要说明：

nameChangedHandler = (e, id ) => {
  const personIndex = this.state.persons.findIndex(p=> {
    return p.id === id;
  })

您看到的是 arrow function。出于整个答案的目的，请将它们视为正常函数（虽然不一样，但是也可以使用常规函数来完成）。从语义上讲，箭头函数或常规函数不会更改代码的用途/意图，因此我不再赘述，您应该只知道所看到的内容。如果您不熟悉它们，则应该仔细阅读，它们非常有用。箭头功能的签名是 (a,b) => {}， a => {}或 a => <expression>。因此，粗略地讲，以上内容可以在逻辑上解释为 function(e,id){}和 function(p){}，只是为了在我继续之前将其弄清楚（如果以这种方式编写，将不会起作用，但这就是它传达的信息）。

代码本身提取与您传递给nameChangeHandler的 id参数匹配的人员的索引。这是使用 findIndex完成的，该函数可遍历数组（在本例中为状态的 .persons数组），并返回通过给定测试函数的第一个元素的索引。然后将该索引存储在变量中，以供以后在代码中使用。

价值

e和 id来自函数本身的调用，由于我看不到 <Person>类是什么，因此无法提供更多详细信息，但是可以安全地假定此处理程序已附加到输入字段。通过输入字段上的 onChange处理程序发生更改后，react将触发一个处理程序并将包含事件数据的 event传递给它。您的处理程序实际上不是 nameChangeHandler函数，它是一个带 event e的箭头函数，然后调用 nameChangeHandler并同时传递 event e和 id给对方，您可以看到在这里 changed={(e)=>this.nameChangedHandler(e, person.id)}。其余的值从您的 state中读取。

让我们继续执行代码：

const person = {
  ...this.state.persons[personIndex]
};

我们这里拥有的称为 spread。它本质上是“解压缩和重新打包”对象或数组，您可以在给定的MDN链接上了解有关它的更多信息。这是ES6的一项强大的新功能，使生活更加轻松。

所以上面的代码被用来巧妙地将一个人对象从数组中复制到一个新的局部变量中（或者是一个 const，因为变量暗示着改变的可能性），我们这样做是因为在javascript中，对象数据被存储通过引用，所以我们不能简单地更改初始数组内的person对象，这会使状态发生变化。我们不想改变国家。不变是这里的关键。

person.name= e.target.value;

接下来，我们有一个简单的任务。我们刚刚创建的新 person对象是该州 .persons数组中人员的精确副本（某种形式），这不好，我们想要更改名称，所以我们要这样做。我们访问 event e并读取触发它的 value的 target，将新值分配给我们的 person对象，现在我们有了一个“改变的人”（双关语）。

我们要做的是，将这些更改推入状态，以便新的渲染可以显示它们，因此我们这样做：

const persons = [...this.state.persons];
persons[personIndex] = person;

此代码再次使用传播将旧阵列从状态克隆/复制到新的本地阵列人员中。它等效于使用 const persons = this.state.persons.slice()。您可以在 MDN上阅读有关 .slice()的更多信息（有意不要为您留下直接链接，以便您搜索并了解该部分，MDN确实是各种文档的一个很好的来源，并且可以了解您在该网站上的访问方式就是救生员。）最后，克隆数组后，我们找到原始人员，并用名称已更改的本地人员对象替换它。

this.setState({
  persons: persons
})

最后，我们使用react提供的 .setState方法（请参见 documentation）来不变地更改状态。此更改将触发一个新的 render()，您将能够在UI中看到更改。 .setState()本身通过进行浅合并来操作。这意味着仅将传递给方法本身的属性更改/添加到状态，其余属性将保持原样。由于我们传递的唯一内容是 persons的另一个数组，这是我们的本地数组，并且更改了人员，因此这是唯一发生更改的东西。