如何通过点击子组件触发父componentDidUpdate

Question

在我的父组件中，我有一个名为 ListOfItems.js 的 class 组件，它列出了一堆像这样的对象：

class ListOfItems extends Component {
  construction (props) {
    super(props);
    this.state = {
      objectList: []
    }
  }
}

// This gets the list of objects to display
componentDidMount() {
   this.getObjectList();
}

componentDidUpdate(_prevProps, prevState) {

  if( this.state.ObjectList !== prevState.ObjectList) {

     // this is called infinitely which is a problem
     console.log("entered");
     this.getObjectList();
  }
}

getObjectList = () => {
  const input = { id_for_this_list: id }

  fetch( connectToApi, {
     method: "PUT",
     headers: { //stuff}
     body: JSON.stringify(input)
  })
     .then(res => //)
     .then(result => 
        if( result.length >= 0) {
            this.setState( {...this.state, objectList: result });
        }   
     )
     .catch(err=>{console.error(err)});
}

render () {
  return (
    {this.state.objectList.map(item) => {
      <Object 
        objectList={this.objectList}
        data={item}
       //few other props here
      >
    }}
  )
}

在我的子组件中，我有一个名为 Object.js 的 功能组件 。在此，我有一个删除功能，如果用户选择对象上的“x”图标，该对象将从列表中删除。

// 'x' image that, when clicked on, deletes object from list of objects
// (heavily simplified for Whosebug)

<img onClick= {() => { deleteObject() })>

const deleteObject() = () => {
   fetch( connectToApi, {
     method: "DELETE"
   })
      .then(res => //)
      .then(result => //deletion made and confirmed succesful)
      .catch(err => console.error(err))
}

如何在 ListOfItems.js（父级）中触发 componentDidUpdate()，当我 在 “x” 上单击 在 Object（子）上？

顺便说一句，parent 必须是 class component 和 child 必须是 功能组件 ，很遗憾。

Answer 1

当您调用 getObjectList 时，您似乎从来没有为您的父组件设置状态，所以这对您来说可能是个问题，我不确定您是否故意将其排除在本摘录之外.

无论哪种方式，您都需要从父组件传递一个函数来设置父组件中保存的状态。这将导致父级重新渲染。

如果您不想更改状态，您可以调用从父级传递的强制刷新的函数，但这并不理想。

parentResetFunction = () => {
   this.forceUpdate()
}

如何通过点击子组件触发父componentDidUpdate

How to trigger parent componentDidUpdate by click in child component

javascript

reactjs

onclick

parent-child

react-class-based-component