在 Parent-class 传递的事件处理程序中有条件地更新子组件的状态

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

我正在努力实现这一目标：我想将 handleCreate（粗体部分）中函数的 post-request 部分移动到可以由 Child-class 调用的父组件。这个想法是使组件抽象并可由其他类似的 Parent-classes.

重用。

Answer 1

在parent中创建函数，并传递给child中的props:

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

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

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

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

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

旁注 2：使用 props 进行解构通常很方便：

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

旁注 3：您的 Parent 组件通过 ...props:[=25 使用 all props 调用 Child =]

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

这通常不是最好的。仅传递 Child 它实际需要的内容，在本例中为 val 和 onCreate:

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

在 Parent-class 传递的事件处理程序中有条件地更新子组件的状态

Conditionally updating child component's state in event-handler passed by Parent-class

javascript

reactjs

use-state