时间戳

首页 > 解决方案 > 如何通过将函数作为道具传递给其子级来更新父级的状态

javascript - 如何通过将函数作为道具传递给其子级来更新父级的状态

问题描述

我有一个父组件 A，它将有一个子组件 B。父组件可以有多个相似的子组件。我想在父组件中处理这个子组件的数据，因此我将一个函数作为道具传递给子组件。现在，每当子组件发生更改时，我都想重新渲染父组件中的所有组件。我在父级中有一个名为 componentList 的状态，它是一个对象类型的数组。每个对象都将包含有关一个子组件的数据。这给了我语法错误，如果我更改并尝试其他方法，它会给我未定义的 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’”

标签： javascriptreactjstypescript

解决方案

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

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});

推荐阅读