предотвратить повторный рендеринг с помощью крючков

Question

Я обрабатываю статус переключателя, который находится внутри таблицы ... когда запрос к api терпит неудачу, мне нужно вернуть ошибку, и проверенный статус не может измениться.

Проверено контролируется спецификацией c данные из api .. Что происходит, когда setErrors компонент повторно визуализируется, что, как я считаю, является причиной изменения кнопки переключения.

 async function handleStatus(groups, status, id) {
    const response = await chengeStatus(groups, status, id);
    const { status: state, data, message } = response;

    if (state) {
      setGroups(data);
      return true;
    } else {
      setErrors({
        status: true,
        message: message,
      });
      return false;
    }
  }

Кнопка переключения:

const columns = [
    {
      cell: (row) => {
        return (
          <Switch
            checked={row.enable}
            handleChange={() => handleStatus(groups, row.enable, row.id)}
          ></Switch>
        );
      },
      width: "80px",
    },
  ];

Отображение ошибки:

 return(
     {errors.status &&
      <Alert
      message="Erro"
      description={errors.message}
      type="error"
      showIcon
      />
      } 
    )

Answer 1

Не рекомендуется решать эту проблему, предотвращая повторный рендеринг.

То, что вам нужно сделать, должно изменить checked={row.enable} на defaultChecked={row.enable}

передать значение по умолчанию и создайте еще один хук для реального проверенного состояния:

const Switch = ({ defaultChecked, handleChange }) => {
  const [checked, setChecked] = useState(defaultChecked);

  useEffect(() => {

    setChecked(defaultChecked);

  }, [defaultChecked]); // Update the state if props change again.

  const onToggle = () => {
    handleChange(!checked);
    setChecked(!checked);
  }

  return <Comp checked={checked} onToggle={onToggle} />; // TODO show you the idea only
}

, поэтому проверяемое значение останется неизменным после щелчка до тех пор, пока вы не повторно загрузите row данные.

Answer 2

Я хочу поделиться разрешением, как сказал @AllenWong, предотвращение повторного рендеринга - это не лучший путь в этом случае.

Я немного запутался в роли defaultValue и проверил ..

Итак, как сказал Аллен, я изменил check = {row.enable} на defaultValue = {row.enable} и создал ловушку checked.

Но мне пришлось контролировать проверенное состояние немного иначе , потому что у меня есть несколько проверенных состояний для управления.

Итак, я добавил свойство name для переключения компонента

<Switch
   name={row.id}  
   checked={checked[row.id]}
   defaultChecked={row.enable}
   handleChange={() => handleStatus(groups, row.enable, row.id)}>
 </Switch>

И когда запрос не выполняется:

const obj = {...checked} 
  obj[id] = status
      setChecked(obj)