Блог

Я пытаюсь настроить пользовательский компонент для своих форм-крючков реакции и таблицы реакций

 const selectedUserIds =  watch(`user_ids`) || [];

<Controller
  control={control}
  name={fieldName("user_ids")}
  render={({ field: { value, onChange } }) => (
  <UserTable selectedUserIds={selectedUserIds} updatePropertySelection={onChange}/>
)}
/>
 

ПригОдный для использования:

 function updatePropertyTableSelection(ids){
  const ids = extractIds(ids);
  updatePropertySelection(ids);
}

const selectedUserIdsForTable = convertIdsToTableFormat(selectedUserIds)
return (
<React.Fragment>
    <BasicTable
        tableHeader={() => null}
        columns={[
          {
            Header: "User Name",
            accessor: "attributes.name",
          }
        ]}
        data={data}
        selectedRows={selectedUserIdsForTable}
        onSelectedRowsChange={updatePropertyTableSelection}
      />
</React.Fragment>
)
 

Когда я связываю обработчик onChange с выбором updatePropertySelection, я застреваю в бесконечном повторном запросе. Как я должен это предотвратить?

Я столкнулся с той же проблемой и решил ее, выполнив следующее:

1. Во-первых, моя проблема связана со старой формой react-hook, теперь я использую ^7.14.2 ее и решаю проблему.
2. Второе решение исправлена проблема путем замены onChange field.onChange , например, на (из реального проекта):

    <Controller
     name={"explanation"}
     control={props.control}
     render={({field}) => {
       return (
         <MyEditor
           placeholder={t("onlineAssessments.question.explanationPlaceholder")}
           onPressEnter={props.onPressEnter}
           onChange={(val, editor) => {
               // notify parent 
               field.onChange(val);
   
               // calc count
               setExplanationCount(editor?.getBody().innerText.trim().length)
             }
           }
         />
       )
     }
     }
   /> 
    

и я думаю, что это изменение связано с последним обновлением..

3. Может быть, у вас есть что-то, что запускает повторный рендеринг, база на вашей таблице, вам может потребоваться useCallBack или предотвратить повторный рендеринг useMemo при каждом посещении, если, например, изменится зависимость:

    const updatePropertyTableSelection = useCallBack((ids) => {
     const ids = extractIds(ids);
     updatePropertySelection(ids);
   }, []);
    

   и

    const selectedUserIdsForTable = useMemp(() => { convertIdsToTableFormat(selectedUserIds)
   }, []);
    

Примечание: Не забудьте обновить зависимость только в том случае, если это необходимо, и только до того, что вам нужно было повторно отобразить