Question

我是ReactJS的新手，对内联箭头功能的使用存在疑问，即使经过数小时的ReactJS阅读JavaScript ES6箭头功能，也无法理解。

const PersonInputs = ({ idx}) => {
 return (
       <div key={`name-${idx}`}>
      <input type="button" value="Remove Person" onClick={() => removePerson(idx)}/>
       </div>
    );
};

这是我在单独的js文件中定义的removePerson函数：

 const removePerson = (index) => {
        let updatedPersons = [...personState];
        var temp = updatedPersons[index];
         updatedPersons = updatedPersons.filter(person => person.name !== temp.name);
         setPersonState(updatedPersons);
    };

  const blankPerson = { name: '', age: '' };
    const [personState, setPersonState] = useState([
        { ...blankPerson },
    ]);

removePerson函数需要索引作为参数，但是当我如下提供时，出现TypeError：temp未定义。

const PersonInputs = ({ idx}) => {
 return (
       <div key={`name-${idx}`}>
      <input type="button" value="Remove Person" onClick={(idx) => removePerson(idx)}/>
       </div>
    );
};

我无法理解为什么onClick = {（idx）=> removePerson（idx）}会导致错误，但是可以与onClick = {（idx）=> removePerson（idx）}一起使用。有人可以帮我吗预先感谢。

Answer 1

onClick传递综合事件，而不是索引。删除idx作为onClick参数：

const PersonInputs = ({ idx}) => {
 return (
       <div key={`name-${idx}`}>
      <input type="button" value="Remove Person" onClick={() => removePerson(idx)}/>
       </div>
    );
}

由于您的函数正在获得React的综合事件与索引的关系，因此它会抛出类型错误。

内联箭头功能|空参数

1 个答案: