Question

我正在处理表中的切换按钮状态。当对api的请求失败时，我需要返回一个错误，并且检查后的状态无法更改。

已检查是由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}并创建了选中的钩子。

但是我必须控制检查状态有些不同，因为我要控制多个检查状态。

所以，我添加了名称prop来切换组件

AF
AX
AL
AG
AQ
AN
AO
AV
AY

...and so on.

当请求失败时：

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

防止用钩子重新渲染

2 个答案: