React - UseState - 如何部分更新状态对象

Question

Problem

Hi,

I'm trying to partially update my state object :

const [elephantProp, setElephantProp] = useState({
        name: "",
        color: "",
        size: "",
        race: "",
        country: "",
    });

Let's say I want to update only color and size parameters.

What I have tried

1

Dynamically change parameters (according to the input object) :

const handleChange = (input) => {
    Object.keys(input).forEach((key) => {
        setElephantProp({ ...elephantProp, [key]: input[key] });
    };

Output : change only last parameter (size).

2

Set all parameters at once :

const handleChange = (input) => {
        setElephantProp({ ...elephantProp, color: input.color, size: input.size });
    };

Output : Works but is not dynamic (if I add a parameter to the input object there will be no effects)

Do you have any ideas on how to dynamically update some of my state variables ?

Maybe I should consider splitting into multiple state variables (not convenient with a lot of variables) or using nested objects ?

Answer 1

From you code I am going to assume that input is an object representing the state updates, eg

{
    name: "Dumbo",
    country: "USA"
}

In this case you can simply do:

const handleChange = (input) => {
    setElephantProp({ ...elephantProp, ...input });
}

As ...input come last, its properties will overwrite elephantProp properties that have the same key. Please notice in this way all input keys which are not present in elephantProp , will be added to the state; eg

 const elephantProp = { name: "", color: "", size: "", race: "", country: "", }; const input = { name: "Dumbo", country: "USA", ableToFly: true, }; const updatedElephantProp = { ...elephantProp, ...input } // => the updated state will contain the key/value pair 'ableToFly: true' too console.log(updatedElephantProp)

This behaviour might be desirable or not, depending on your needs and project specifications.

Answer 2

You can use concept useReducer - is usually preferable to useState when you have complex state logic that involves multiple sub-values - useReducer

    const [changes, onChange] = useReducer((value, change) => ({...(value || {}), ...change}), {});

    //used
    const {name, color, size, race, country} = changes;
    
    const handleChange = change => {
        //example change = {name: 'alex'}
        onChange(change);
    };

Answer 3

React recommends using multiple states for the different variables. However, if you did want to set a full object, you'd likely rather copy the object, and setState only once. You loop might not be caught properly by the rerendering, as it is an async function.

I'm not sure what your implementation is, but something like this should work:

const handleChange = (objectIn) => {
  // create a new object merging the old one and your input
  const newElephant = {
    ...elephantProps,
    ...objectIn
  }
  setElephantProps(newElephant)
}

This should handle your case gracefully. If you're using multiple inputs, I usually handle it that way:

  const onChange = ({ target: { value, name } }) => setElephant({
    ...elephant,
    [name]: value
  })
  return <input onChange={onChange} name="size" value={elephant.size} />

Answer 4

You can pass 2-nd param to handleChange, for example:

const handleChange = (input, name) => {
    setElephantProp({ ...elephantProp, [name]: input[name] });
};

Answer 5

One of your solutions here: codesandbox.io or bellow code using this approach.

  const onChangeHandaller = (e) => {
    setElephantProp({ ...elephantProp, [e.target.name]: e.target.value });
  };

const [elephantProp, setElephantProp] = useState({
    name: "",
    color: "",
    size: "",
    race: "",
    country: ""
  });

  const onChangeHandaller = (e) => {
    setElephantProp({ ...elephantProp, [e.target.name]: e.target.value });
  };

  return (
    <div className="App">
      Name:{" "}
      <input
        value={elephantProp.name}
        name="name"
        onChange={(e) => onChangeHandaller(e)}
      />{" "}
      <br />
      Color:{" "}
      <input
        value={elephantProp.color}
        name="color"
        onChange={(e) => onChangeHandaller(e)}
      />{" "}
      <br />
      Size:{" "}
      <input
        value={elephantProp.size}
        name="size"
        onChange={(e) => onChangeHandaller(e)}
      />{" "}
      <br />
      Race:{" "}
      <input
        value={elephantProp.race}
        name="race"
        onChange={(e) => onChangeHandaller(e)}
      />{" "}
      <br />
      Country:{" "}
      <input
        value={elephantProp.country}
        name="country"
        onChange={(e) => onChangeHandaller(e)}
      />{" "}
      <br />
    </div>