Условное обновление состояния дочернего компонента в обработчике событий, передаваемом Parent-классом

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 (полужирный раздел), к компоненту Parent, который может вызываться классом Child. , Идея состоит в том, чтобы сделать Компонент абстрактным и многократно используемым другими подобными Родительскими классами.

Answer 1

Создайте функцию в родительском элементе и передайте ее дочернему элементу в реквизитах:

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

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

Затем попросите дочерний элемент вызвать функцию с любыми необходимыми ей параметрами (кажется, что никаких в вашем примере вы не используете val в нем, например):

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

---

Примечание: нет причин копировать props.val в val элемент состояния внутри дочернего элемента компонент, просто используйте props.val.

. Примечание 2: Разрушение часто удобно с подпорками:

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

Примечание 3: ваш компонент Parent вызывает Child с все его реквизита, через ...props:

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

Это вообще не лучше. Только передайте Child, что ему действительно нужно, в этом случае val и onCreate:

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