更新 React state 中的嵌套数组

Question

While the onChange works as expected the features are not being updated in state. After many attempts I thought id ask as I'm having trouble finding examples similar to what I'm trying to do.

Array of objects (In this case one object for simplicity sake)

const data = [{
    name: 'Starter',
    featured: false,
    price: { Monthly: '$49', Quarterly: '$129', Annually: '$379' },
    description: 'You’re new to the gym but want to do it right.',
    button: {
      label: 'Subscribe',
      href: '/register',
    },
    features: ['Full gym access'],
    logomarkClassName: 'fill-gray-300'}]

Map

{plans[0].features.map((feature, index) => (
  <div key={index}>
    <input
      value={feature}
      onChange={(e) => {
        feature = e.target.value
        setPlans([...plans])
      }}
    />
  </div>
))}

I am able to update the price object using the code below but having trouble with features as it is an array.

onChange={(e) => {
  plans[0].price.Annually =
  e.target.value
  setPlans([...plans])
}}

UI

Answer 1

You must have at least two states, plans and selectedPlan . The plans state will keep the whole data and selectedPlan that holds the selected membership that will be edited.

The edit form will show the selectedPlan and when the user edits the information it should not update the main plans state directly but update the selectedPlan instead. The plans state will only be updated if the user clicks the "Update button" (where your image is shown as a created button).

  const updatePlans = useCallback(() => {
    const updatedPlans = [...plans];
    updatedPlans[selectedPlan.id] = selectedPlan;
    setPlans(updatedPlans);
    setSelectedPlan();
  }, [plans, selectedPlan]);

Here, we clone the plans and update the selected plan with an id property as a helper.

To update the features array in a controlled input, you can use toString() method at the value , and at onChange you can split the input.

  <input
    value={selectedPlan.features.toString()}
    onChange={(e) => {
      setSelectedPlan((prevState) => {
        return { ...prevState, features: e.target.value.split(",") };
      });
    }}
  />

you can see the minimal example here: