Reactjs 防止使用挂钩重新渲染

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

检查由api中的特定数据控制。。发生的情况是，当设置错误时，组件被重新渲染，我认为这是切换按钮更改的原因

 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",
    },
  ];

const列=[
{
单元格：（行）=>{
返回(
handleStatus（组，row.enable，row.id）}
>
);
},
宽度：“80px”，
},
];

错误显示：

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

返回(
{errors.status&&
} 
)

通过防止重新渲染来解决此问题不是一个好主意

您需要做的应该是将

checked={row.enable}

更改为

defaultChecked={row.enable}

将默认值传递给并为实际选中状态创建另一个钩子：

const开关=（{defaultChecked，handleChange}）=>{
const[checked，setChecked]=使用状态（defaultChecked）；
useffect（（）=>{
setChecked（defaultChecked）；
}，[defaultChecked]；//如果道具再次更改，请更新状态。
const ontogle=（）=>{
手柄更换（！已检查）；
setChecked（！checked）；
}
return；//只向您展示想法
}

---

因此，选中的值在单击后将保持不变，直到重新绘制

行

数据。

通过防止重新渲染来解决此问题不是一个好主意

您需要做的应该是将

checked={row.enable}

更改为

defaultChecked={row.enable}

将默认值传递给并为实际选中状态创建另一个钩子：

const开关=（{defaultChecked，handleChange}）=>{
const[checked，setChecked]=使用状态（defaultChecked）；
useffect（（）=>{
setChecked（defaultChecked）；
}，[defaultChecked]；//如果道具再次更改，请更新状态。
const ontogle=（）=>{
手柄更换（！已检查）；
setChecked（！checked）；
}
return；//只向您展示想法
}

---

因此，选中的值在单击后将保持不变，直到您重新蚀刻

行

数据。

我想分享解决方案，正如@AllenWong所说，“防止重新渲染”不是解决此问题的最佳途径

我对defaultValue的角色有点困惑，并检查了

所以，正如Allen所说，我将checked={row.enable}更改为defaultValue={row.enable}，并创建checked钩子

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

所以，我添加了名称道具切换组件

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

---

正如@AllenWong所说，阻止重新渲染并不是解决这个问题的最佳途径

我对defaultValue的角色有点困惑，并检查了

所以，正如Allen所说，我将checked={row.enable}更改为defaultValue={row.enable}，并创建checked钩子

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

所以，我添加了名称道具切换组件

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

---

if（state）{

这个

状态是从哪里来的？@MayankPandeyz来自chengeStatus函数，它调用API@MayankPandeyz我分解了结构并将状态名称分配给status@MayankPandeyz通过
const{status:state}=response；
将
status
重命名为
state
我给它起了一个“昵称”，就像@AllenWong说的那样。
if（state）{
这个
state
从哪里来？@chengeStatus函数的MayankPandeyz调用API@MayankPandeyz我分解了结构并将状态名称分配给status@MayankPandeyz通过
const{status:state}将
status
重命名为
state
=response；
it exist dude..当我做{status:state}的时候，我给它起了一个“昵称”，就像@AllenWong说的那样。
handleChange（！checked）；
所以你可以通过
handleChange={（isChecked）=>handleStatus（groups，isChecked，row.id）}使用新的状态作为你的api数据
由于row.enable在您重新蚀刻之前不会更新，因此如果您的用户在短时间内反复切换开关，它就不那么可靠了。我有点像您所说的那样做了，但有点不同…第一次在开关组件中添加了name prop，并按照您所说的将checked更改为defaultchecked…因此当请求失败时：const obj={…checked}obj[id]=status setChecked（obj）oic，因此您可以将onToggle设置为async func，并等待对最终setChecked的响应结果。
const-onToggle=async（）=>{const-result=await-handleChange（！checked）；setChecked（result）；}
handleChange（！checked）；
因此您可以通过
handleChange={（isChecked）=>handleStatus（groups，isChecked，row.id）}使用新状态作为api数据
由于row.enable在您重新蚀刻之前不会更新，因此如果您的用户在短时间内反复切换开关，它就不那么可靠了。我有点像您所说的那样做了，但有点不同…第一次在开关组件中添加了name prop，并按照您所说的将checked更改为defaultchecked…因此当请求失败时：const obj={…checked}obj[id]=status setChecked（obj）oic，因此您可以将onToggle设置为async func，并等待对最终setChecked的响应结果。
const-onToggle=async（）=>{const-result=wait-handleChange（！checked）；setChecked（result）；}