React - Axios 提出仅更新特定字段的请求

Question

对于使用后端的项目做出反应和工作相对较新。 基本上所有功能都相应地工作，但是，我有点不确定如何实现put 请求，该请求允许我只向后端发送特定值。

会发生什么： 当我向update 一家公司发送请求时，它要求我填写所有fields。如果我将字段留空，它会将它们作为空值发送。

E.G：

company 具有姓名、电子邮件、密码等字段。 我想更新 ONLY email 字段而不更改其他字段。

组件：

function UpdateCompany(props): JSX.Element {

  const history = useHistory();
  const [name , setName] = useState('');
  const [email , setEmail] = useState('');
  const [password , setPassword] = useState('');
  const [skipCount, setSkipCount] = useState(true); 

  async function formData() {
    try {

      const response = await axios.put<CompanyModel>(globals.adminUrls.updateCompany + props.location.state.id, {
        name: name,
        email: email,
        password: password
      });

      const updated = response.data;
      store.dispatch(companyUpdatedAction(updated));
      notify.success(SccMsg.COMPANY_UPDATED)

    }
    catch (err) {
      notify.error(err);
    }
  }

  const handleSubmit = (e) => {
      e.preventDefault();
      formData();
  }

  useEffect(() => {
    if (skipCount) setSkipCount(false);
    if (!skipCount)  formData();

}, []);

  return (
    <div className="custom-field">
      <h2>Update Company</h2>
      <div>
        <form onSubmit={handleSubmit} >
          <label>Name</label>
        <input type="text" name="name" onChange={(e)=>{setName(e.target.value)}}/>
        <label>Email</label>
        <input type="text" name="email" onChange={(e)=>{setEmail(e.target.value)}}/>
        <label>Password</label>
        <input type="text" name="password" onChange={(e)=>{setPassword(e.target.value)}}/>

        <input  type="submit" name="submit"/>
        </form>
      </div>

    </div>
  );
}

export default UpdateCompany;

希望我的问题很清楚。

谢谢。

后端控制器：

@PutMapping(value = "update/company/{id}")
    @ResponseStatus(HttpStatus.NO_CONTENT)
    @Override
    public void updateCompany(@PathVariable int id, @RequestBody CompanyDto companyDto) throws DoesNotExistException, AlreadyExistsException {
        adminService.updateCompany(id, companyDto);

后端服务：

 public void updateCompany(@Valid int id, CompanyDto companyDto) throws DoesNotExistException, AlreadyExistsException {

Company companyDao = companyMapper.toDao(companyDto);

if (!compRepo.existsById(id))
    throw new DoesNotExistException("Company does not exist");

companyDao.setId(id);

compRepo.saveAndFlush(companyDao);

Answer 1

只需使用简单的if 条件来执行空检查，同时填充PUT 请求正文。您可以通过以下方式进行：

async function formData() {
    try {
     const data = {};
     if(name) data.name = name; 
     if(email) data.email = email;
     if(password) data.password = password
     
     const response = await axios.put<CompanyModel>(globals.adminUrls.updateCompany + props.location.state.id, data);

      const updated = response.data;
      store.dispatch(companyUpdatedAction(updated));
      notify.success(SccMsg.COMPANY_UPDATED)

    }
    catch (err) {
      notify.error(err);
    }
  }

Answer 2

您需要获取当前值，然后使用它们设置初始状态。

这将具有在表单的输入字段中显示当前值的额外好处。出于这个原因，添加的调用是合理的，而且非常微不足道（公司信息多久会真正更新一次？？）。

这样的事情可能会起作用：

const [name , setName] = useState('');
const [email , setEmail] = useState('');
const [password , setPassword] = useState('');

// Get the current data, so you can set initial state with it.
useEffect(() => {
    const currentData = await axios.get<CompanyModel>();

    setName(currentData.name);
    setEmail(currentData.email);
    setPassword(currendData.password);

    if (skipCount) setSkipCount(false);
    if (!skipCount)  formData();
}, []);


async function formData() {

  .....

   const response = await axios.put<CompanyModel>(globals.adminUrls.updateCompany + 
      props.location.state.id, {
       name: name,
       email: email,
       password: password
     });

   const updated = response.data;

  ......

}

在此示例中，除非用户在表单中键入其他内容，否则您的值将保持不变。

您可能需要更改的唯一内容是获取请求，因为我不熟悉您的终点。