如何通过将 function 作为道具传递给其子级来更新父级的 state

Question

我有一个父组件 A，它将有一个子组件 B。父组件可以有多个相似的子组件。 我想在父组件中处理这个子组件的数据，因此我将一个函数作为道具传递给子组件。 现在，每当子组件发生更改时，我都想重新渲染父组件中的所有组件。 我在父组件中有一个 state，它是一个 object 类型的数组。 每个 object 都将包含一个子组件的数据。 这给了我语法错误，如果我更改并尝试其他方法，它会给我未定义的 componentList 值。

export class Parent extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      componentList: []
    };
  this.onClick = this.onClick.bind(this);
  this.onDataChange = this.onDataChange.bind(this);
 }

public onDataChange(index: number) {
  return function(data: Data) {
    this.setState({
      this.state.componentList[index].name = data.name;
    });
  };
}

在子组件中，我正在更新名称 onChange，如下所示：

interface Props {
 name?: string;
 age?: number;
 onDataChange: (data: Data) => void;
}

export class Child extends React.Component<Props> {
 constructor(props: Props) {
  super(props);
  this.state = {};
  this.onNameChange = this.onNameChange.bind(this);
}

public onNameChange(event) {
  this.props.onDataChange({
    name: event.target.value,
    age: this.props.age
  });
}

出现错误：“TypeError：无法读取未定义的属性‘componentList’”

Answer 1

在发送到道具之前，您是否正在绑定 onDataChange function？

export class parentClass extends Component{
    constructor(props){
        super(props);
        this.onDataChange=this.onDataChange.bind(this);
    }
}*/

如果不是，onDataChange 调用中的这个关键字指向错误的上下文

也更换

this.setState({
    this.state.componentList[index].name = data.name;
});

有类似的东西

this.setState({componentList:newComponentList});

Answer 2

由于我的评论似乎对您有所帮助，因此我决定发布答案。 您的onDataChange function 正在返回另一个 function 以供孩子调用。

public onDataChange(index: number) {
  return function(data: Data) { // A function gets returned
    this.setState({
      this.state.componentList[index].name = data.name;
    });
  };
}

在孩子内部，您将this关键字的引用绑定到孩子的this关键字：

this.onDataChange=this.onDataChange.bind(this);

这通常没有错，但是您想更新父级上的 state，因此您需要对父级 this 的引用。

这可以通过简单地更改onDataChange function 的返回“值”来轻松实现。

public onDataChange(index: number) {
  // An arrow function always set the this reference to where it's declared correctly,
  // therefore this inside the function will reference the parent this.
  return (data: Data) => {
    this.setState({
      this.state.componentList[index].name = data.name;
    });
  };
}

那么也过时的是： this.onDataChange = this.onDataChange.bind(this); 在您的父构造函数中。

在MDN-Arrow 函数中阅读此主题可能会有所帮助。