Javascript 向react、redux和API添加条件

我想知道如何使用React、Redux和API对表单进行更新。我想向我的组件添加一个条件。如果页面处于编辑模式，我想将页面更改为编辑模式，如果不是，则按正常方式呈现页面

我希望用户能够进行更新，并将这些更改保存到后端

class SingleCampus extends React.Component {
  componentDidMount() {
    this.props.getUser(this.props.match.params.id);
  }

  render() {
    const { User } = this.props;
    const hasTest = user.tests && user.tests.length;

return (
  <div>
    <div className="single-user">
      <h1>{user.name}</h1>
      <im`enter code here`g src={user.imageUrl} alt={user.name} />
      <h3>
        <b>Address:</b>
        {user.address}
      </h3>
      <b>Description:</b>
      <p> {user.description}</p>
    </div>
    <hr />
    {hasTest ? (
      <React.Fragment>
        <div>
         
          {user.tests.map((test) => {
            return (
              <span key={test.id}>
                <Link to={`/test/${test.id}`}>
                  <h3>
                    {test.grade} 
                  </h3>
                </Link>
         
              </span>
            );
          })}
        </div>
      </React.Fragment>
    ) : (
      <h2>There are no test for this user!</h2>
    )}
  </div>
  );
  }
}
const mapState = (state) => ({
  user: state.user,
});

const mapDispatch = (dispatch) => ({
  getUser: (id) => {
    dispatch(fetchSingleUser(id));
  },
});


`

类single.Component{
componentDidMount（）{
this.props.getUser（this.props.match.params.id）；
}
render（）{
const{User}=this.props；
const hasTest=user.tests&&user.tests.length；
返回(
{user.name}
地址:
{user.address}
说明：
{user.description}


{快点(
{user.tests.map（（test）=>{
返回(
{test.grade}
);
})}
) : (
此用户没有测试！
)}
);
}
}
常量映射状态=（状态）=>({
用户：state.user，
});
常量映射分派=（分派）=>({
getUser:（id）=>{
调度（获取单个用户（id））；
},
});
`

一种简单的方法是在状态中添加一个变量（无论是本地状态还是Redux状态） e、 g

//我想这是您的Redux状态，用于将状态映射到道具？
常量映射状态=（状态）=>({
用户：state.user，
isDisabled:state.isDisabled，
});

将组件中的文本值更改为文本框，您可能需要使用某些UI包，例如材质UI。
然后，根据isDisabled状态值将其禁用 此外，在值更改时，您需要实现以分派更新的值

从'@material ui/core/TextField'导入TextField'；
......
说明：
{user.description}

最后，添加一个按钮以更改isDisabled值。如果处于只读模式，请在编辑模式下处理save

从“@material ui/core/Button”导入按钮；
......
{props.isDisabled？`Edit`:`Save`}

您已经尝试为该组件实现了什么“编辑模式”？我尝试添加状态值edit并将其设置为false。并添加了一个按钮，根据用户的请求将状态从true切换到false，并根据状态显示编辑视图或仅呈现视图模式。困惑来自于不知道如何更新我的数据库。如何以及何时准确地调用thunk以分派操作并进行axios调用。我需要为它更新组件吗？