Reactjs 是否可以在useEffect钩子中更改状态变量？

我想使用相同的表单进行添加和更新。在带有按钮单击事件的列表页面中，我设置了recordForEdit状态变量并将其传递给表单。以下是代码片段：

<RoleForm recordForEdit={recordForEdit} />  

import React, { useEffect, useState } from 'react';
import { Button, Checkbox, FormControlLabel, Grid, TextField } from '@material-ui/core';
import axios from '../../../../../services/auth/jwt/config'

export default function Roles(props) {
  const [roleState, setRoleState] = useState({
    name: '',
    description: '',
    permissions: []
  });
  const [initialPermissions, setInitialPermissions] = useState({
    viewUser: false,
    manageUser: false
  })

  const { recordForEdit } = props
  useEffect(() => {
    if (recordForEdit != null) {
      let obj = {
        name: recordForEdit.name,
        description: recordForEdit.description,
        permissions: recordForEdit.permissions
      }
      setRoleState({
        name: obj.name,
        description: obj.description,
        permissions: obj.permissions
      })
      console.log(obj);
      console.log(roleState);
    }
  }, [recordForEdit]);

  useEffect(() => {
    checkedPermissions();
  }, [initialPermissions.viewUser, initialPermissions.manageUser]);

  const handleSubmit = () => {
    // axios
    //   .post('api/Account/roles', roleState)
    //   .then(res => {
    //     console.log(res);
    //   })
    //   .catch(err => {
    //     console.log(err);
    //   })
    console.log(roleState);
  }

  let permissions = []
  const checkedPermissions = () => {
    let viewUserCheck = initialPermissions.viewUser;
    let manageUserCheck = initialPermissions.manageUser;
    const viewUserObj = {
      name: "View Users",
      value: "users.view",
      groupName: "User Permissions",
      description: "Permission to view other users account details"
    }
    const manageUserObj = {
      name: "Manage Users",
      value: "users.manage",
      groupName: "User Permissions",
      description: "Permission to create, delete and modify other users account details"
    }
    viewUserCheck
      ? permissions.push(viewUserObj)
      : permissions.filter(item => item != viewUserObj)
    manageUserCheck
      ? permissions.push(manageUserObj)
      : permissions.filter(item => item != manageUserObj)
    setRoleState({ ...roleState, permissions: permissions })
  }

  return (
    <form >
      <Grid container  >
        <Grid item xs={12} sm={6} lg={6} md={6}>
          <TextField
            variant="outlined"
            name='name'
            label="Role Name"
            value={roleState.name}
            onChange={e => { setRoleState({ ...roleState, name: e.target.value }) }}
          />
        </Grid>
        <Grid item xs={12} sm={6} lg={6} md={6}>
          <TextField
            variant="outlined"
            name='description'
            label="Description"
            value={roleState.description}
            onChange={e => { setRoleState({ ...roleState, description: e.target.value }) }}
          />
        </Grid>
        <br />
        <br />
        <Grid container item xs={12}>
          <Grid item xs={12} sm={6} lg={6} md={6}>
            <h3> User Permissions</h3>
            <FormControlLabel
              control={<Checkbox
                checked={initialPermissions.viewUser}
                onChange={e => { setInitialPermissions({ ...initialPermissions, viewUser: e.target.checked }) }} />}
              label="View User"
            />
            <FormControlLabel
              control={<Checkbox
                checked={initialPermissions.manageUser}
                onChange={e => { setInitialPermissions({ ...initialPermissions, manageUser: e.target.checked }) }} />}
              label="Manage User"
            />
          </Grid>
        </Grid>
        <Grid container item xs={12} sm={12} md={12} lg={12} justify='flex-end'>
          <Button variant="contained" color="secondary" onClick={handleSubmit}> Submit</Button>
        </Grid>
      </Grid>
    </form>
  );
}

在RoleForm页面中，我将其作为道具接收，并将其设置在对象中。然后在useffect钩子中想要更新roleState。但它不起作用。请帮帮我

这是我的代码片段：

<RoleForm recordForEdit={recordForEdit} />  

import React, { useEffect, useState } from 'react';
import { Button, Checkbox, FormControlLabel, Grid, TextField } from '@material-ui/core';
import axios from '../../../../../services/auth/jwt/config'

export default function Roles(props) {
  const [roleState, setRoleState] = useState({
    name: '',
    description: '',
    permissions: []
  });
  const [initialPermissions, setInitialPermissions] = useState({
    viewUser: false,
    manageUser: false
  })

  const { recordForEdit } = props
  useEffect(() => {
    if (recordForEdit != null) {
      let obj = {
        name: recordForEdit.name,
        description: recordForEdit.description,
        permissions: recordForEdit.permissions
      }
      setRoleState({
        name: obj.name,
        description: obj.description,
        permissions: obj.permissions
      })
      console.log(obj);
      console.log(roleState);
    }
  }, [recordForEdit]);

  useEffect(() => {
    checkedPermissions();
  }, [initialPermissions.viewUser, initialPermissions.manageUser]);

  const handleSubmit = () => {
    // axios
    //   .post('api/Account/roles', roleState)
    //   .then(res => {
    //     console.log(res);
    //   })
    //   .catch(err => {
    //     console.log(err);
    //   })
    console.log(roleState);
  }

  let permissions = []
  const checkedPermissions = () => {
    let viewUserCheck = initialPermissions.viewUser;
    let manageUserCheck = initialPermissions.manageUser;
    const viewUserObj = {
      name: "View Users",
      value: "users.view",
      groupName: "User Permissions",
      description: "Permission to view other users account details"
    }
    const manageUserObj = {
      name: "Manage Users",
      value: "users.manage",
      groupName: "User Permissions",
      description: "Permission to create, delete and modify other users account details"
    }
    viewUserCheck
      ? permissions.push(viewUserObj)
      : permissions.filter(item => item != viewUserObj)
    manageUserCheck
      ? permissions.push(manageUserObj)
      : permissions.filter(item => item != manageUserObj)
    setRoleState({ ...roleState, permissions: permissions })
  }

  return (
    <form >
      <Grid container  >
        <Grid item xs={12} sm={6} lg={6} md={6}>
          <TextField
            variant="outlined"
            name='name'
            label="Role Name"
            value={roleState.name}
            onChange={e => { setRoleState({ ...roleState, name: e.target.value }) }}
          />
        </Grid>
        <Grid item xs={12} sm={6} lg={6} md={6}>
          <TextField
            variant="outlined"
            name='description'
            label="Description"
            value={roleState.description}
            onChange={e => { setRoleState({ ...roleState, description: e.target.value }) }}
          />
        </Grid>
        <br />
        <br />
        <Grid container item xs={12}>
          <Grid item xs={12} sm={6} lg={6} md={6}>
            <h3> User Permissions</h3>
            <FormControlLabel
              control={<Checkbox
                checked={initialPermissions.viewUser}
                onChange={e => { setInitialPermissions({ ...initialPermissions, viewUser: e.target.checked }) }} />}
              label="View User"
            />
            <FormControlLabel
              control={<Checkbox
                checked={initialPermissions.manageUser}
                onChange={e => { setInitialPermissions({ ...initialPermissions, manageUser: e.target.checked }) }} />}
              label="Manage User"
            />
          </Grid>
        </Grid>
        <Grid container item xs={12} sm={12} md={12} lg={12} justify='flex-end'>
          <Button variant="contained" color="secondary" onClick={handleSubmit}> Submit</Button>
        </Grid>
      </Grid>
    </form>
  );
}

import React，{useffect，useState}来自“React”；
从“@material ui/core”导入{按钮、复选框、FormControlLabel、网格、文本字段}；
从“../../../../../services/auth/jwt/config”导入axios
导出默认功能角色（道具）{
const[roleState，setRoleState]=使用状态({
名称：“”，
说明：“”，
权限：[]
});
const[initialPermissions，setInitialPermissions]=useState({
viewUser:false，
manageUser:false
})
const{recordForEdit}=props
useffect（（）=>{
如果（recordForEdit！=null）{
设obj={
名称：recordForEdit.name，
description:recordForEdit.description，
权限：recordForEdit.permissions
}
塞特罗庄园({
名称：obj.name，
描述：obj.description，
权限：obj.permissions
})
控制台日志（obj）；
控制台日志（roleState）；
}
}，[recordForEdit]）；
useffect（（）=>{
checkedPermissions（）；
}，[initialPermissions.viewUser，initialPermissions.manageUser]）；
常量handleSubmit=（）=>{
//axios
//.post（“api/账户/角色”，roleState）
//。然后（res=>{
//控制台日志（res）；
//   })
//.catch（错误=>{
//控制台日志（err）；
//   })
控制台日志（roleState）；
}
让权限=[]
const checkedpowpermissions=（）=>{
让viewUserCheck=initialPermissions.viewUser；
让manageUserCheck=initialPermissions.manageUser；
常量viewUserObj={
名称：“查看用户”，
值：“users.view”，
groupName:“用户权限”，
描述：“查看其他用户帐户详细信息的权限”
}
常量manageUserObj={
名称：“管理用户”，
值：“用户.管理”，
groupName:“用户权限”，
description:“创建、删除和修改其他用户帐户详细信息的权限”
}
查看用户检查
？权限.推送（viewUserObj）
：permissions.filter（item=>item！=viewUserObj）
管理用户检查
？权限.推送（manageUserObj）
：permissions.filter（item=>item！=manageUserObj）
setRoleState（{…roleState，权限：permissions}）
}
返回(
{setRoleState（{…roleState，名称：e.target.value}}}
/>
{setRoleState（{…roleState，description:e.target.value}}}
/>




用户权限
}
label=“查看用户”
/>
}
label=“管理用户”
/>
提交
);
}

setRoleState

是一种异步方法，您无法在

setRoleState（）

之后立即获取

roleState

的更新值

您应该使用

useffect

和添加

roleState

依赖项来检查更新的状态值

useEffect(() => {
  console.log(roleState);
}, [roleState]);

---

您在

setRoleState

之后立即记录变量

roleState

，但是

setState

是异步的。您是否收到任何错误？如果我添加roleState依赖项，如果陷入无限循环。您不应该

setRoleState（）

在roleState依赖项Useffect中。仅在roleState依赖项useEffect中的console.log可检查roleState更新。但它没有打印任何东西。