如何仅传递在 POST 请求正文中更改的那些值

Question

I have multiple state variables, that contains data entered in a form by the user. Since this form is only meant to update the existing values, I have to pass in only those values that have changed from its initial value (the one returned from the GET request).

State:

const [name, setName] = useState(props.user?.name ?? null);
const [lang, setLang] = useState(props.user?.lang ?? null);
const [enableChecks, setEnableChecks] = useState(props.user?.checkEnabled ?? false)

In the event that the user only changed the name, how can I pass in only name in the request body?

What I have tried: I have the user props, so I have multiple if statements that check if the props matches the state. If it doesn't, then I add it to the request payload. This works, but when there's a lot of state, there will be a lot of if statements, which isn't nice to look at.

Is there a better way to do this?

Answer 1

You can keep your state in an object, and then only update field state when the updatedUser and user state values are different.

 //use `import` in your real component instead //import { useState } from 'react'; const { useState } = React; //fake your user prop const userProp = { name: "Name", lang: "English", } function App(props) { const [user, setUser] = useState(props.user); const [updatedUser, setUpdatedUser] = useState({}); const handleChange = (e) => { const newlyUpdatedUser = {...updatedUser, } if(props.user[e.target.name] === e.target.value) { delete newlyUpdatedUser[e.target.name] } else { newlyUpdatedUser[e.target.name] = e.target.value } setUpdatedUser(newlyUpdatedUser); setUser({...user, [e.target.name]: e.target.value }) }; console.log(updatedUser) return ( <React.Fragment> <label> Name: <input value={user.name} name="name" onChange={handleChange} /> </label> <label> Lang: <input value={user.lang} name="lang" onChange={handleChange} /> </label> </React.Fragment> ); } ReactDOM.render(<App user={userProp} />, document.getElementById("root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 2

Instead of having multiple state variables, you can have a single state variable like

const [state, setState] = useState(props.user)

and then change handler should look like

const handleChange = (e) => {
    setState({
      ...state,
      [e.target.name]: e.target.value,
    });
  };

finally, when submitting the form you can make your body data for post request like

const handleSubmit = () => {
  const requestData = {}  

  for (const [key, value] of Object.entries(state)){
    if(props.user[key] !== value) {
      requestData[key] = value
    }
  }

  axios.post('some api url', responseData)
}