Как добавить в состояние или иным образом заменить состояние, если ключ существует?

Question

У меня есть несколько переключателей, и я хотел бы сгенерировать динамическое c состояние, установив состояние с помощью первого начального щелчка, а затем каждого щелчка после объединения состояния в текущее состояние или замены ключа новым значением если он уже существует.

Я пробовал это сам, поэтому извиняюсь, если это вообще не выглядит правильно.

Вот пример того, что я пытаюсь сделать.

import React, { useState } from "react";
import { FormGroup, CustomInput } from "reactstrap";
import UniqueString from "unique-string";

function Ratings({ parentCheckedGood, parentCheckedNA, Question }) {
  //initializing empty state object
  const [state, setState] = useState({});
  //Here is where I am stuck, with each click after the first I should concatenate or 
  //replace
  const handleChange = (e) => {
    const { name, value } = e.target;
    if (name in state) {
      setState(...state, { name: value });
    } else {
      setState(...state, {
        name: value,
      });
    }
  };
  console.log(state);
  const string = UniqueString();
  return (
    <div>
      <FormGroup required>
        <div onChange={handleChange}>
          <CustomInput
            // checked={parentCheckedGood}
            type="radio"
            id={string + "1"}
            name={Question}
            value="Good"
            label="Good"
          />
          <CustomInput
            type="radio"
            id={string + "2"}
            name={Question}
            value="Fair"
            label="Fair"
          />
          <CustomInput
            type="radio"
            id={string + "3"}
            name={Question}
            value="Poor"
            label="Poor"
          />
          <CustomInput
            // checked={parentCheckedNA}
            name={Question}
            type="radio"
            id={string + "4"}
            value="N/A"
            label="N/A"
          />
        </div>
      </FormGroup>
    </div>
  );
}

export default Ratings;

Эти радиокнопки позволяют мне заработать деньги .. Ура

Answer 1

Используйте формат функции setState, и вы были близки к синтаксису:

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