有条件地更新父类传递的事件处理程序中子组件的 state

Question

const Child = (props) => {
  const [val, setVal] = useState(props.val);

  const handleCreate = (newData) => new Promise((resolve, reject) => {
        setTimeout(() => {
            {
                const transactions = JSON.parse(JSON.stringify(tableData));
                const clean_transaction = getCleanTransaction(newData);
                const db_transaction = convertToDbInterface(clean_transaction);
                transactions.push(clean_transaction);
// The below code makes post-request to 2 APIs synchronously and conditionally updates the child-state if calls are successful.
                **categoryPostRequest(clean_transaction)
                    .then(category_res => {
                        console.log('cat-add-res:', category_res);
                        transactionPostRequest(clean_transaction)
                            .then(transaction_res => {
                                addToast('Added successfully', { appearance: 'success'});
                                **setVal(transactions)**
                            }).catch(tr_err => {
                            addToast(tr_err.message, {appearance: 'error'});
                        })
                    }).catch(category_err => {
                    console.log(category_err);
                    addToast(category_err.message, {appearance: 'error'})
                });**
            }
            resolve()
        }, 1000)
    });

  return (
    <MaterialTable
            title={props.title}
            data={val}
            editable={{
                onRowAdd: handleCreate
            }}
        />
  );
}

const Parent = (props) => {
  // some other stuff to generate val
  return (
    <Child val={val}/>
  );
}

我正在努力实现这一点：我想将句柄创建（粗体部分）中 function 的请求后部分移到可由子类调用的父组件。 这个想法是使组件抽象并可由其他类似的父类重用。

Answer 1

在parent中创建function，并在props中传给child：

const Parent = (props) => {
  // The handler
  const onCreate = /*...*/;

  // some other stuff
  return (
    <Child ...props onCreate={onCreate}/>
  );
}

然后让孩子使用它需要的任何参数调用 function （您的示例中似乎没有任何参数，例如，您没有在其中使用val ）：

return (
  <MaterialTable
          title={props.title}
          data={val}
          editable={{
              onRowAdd: props.onCreate // Or `onRowAdd: () => props.onCreate(parameters, go, here)`
          }}
      />
);

---

旁注：没有理由将props.val复制到子组件中的val state 成员，只需使用props.val 。

旁注 2：解构通常对 props 很方便：

const Child = ({val, onCreate}) => {
  // ...
};

旁注 3：您的Parent组件通过...props调用Child及其所有道具：

return (
  <Child ...props onCreate={onCreate}/>
);

这通常不是最好的。 只传递Child它实际需要的东西，在这种情况下， val和onCreate ：

return (
  <Child val={props.val} onCreate={onCreate}/>
);