更新 React state 中的嵌套數組

Question

雖然 onChange 按預期工作，但 state 中的功能並未更新。 經過多次嘗試后，我想我會問，因為我很難找到與我正在嘗試做的事情相似的例子。

對象數組（為簡單起見，在本例中為一個 object）

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>
))}

我可以使用下面的代碼更新 object 的價格，但由於它是一個數組，所以在功能方面存在問題。

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

用戶界面

Answer 1

您必須至少有兩個狀態，計划和selectedPlan 。 計划state 將保留整個數據和selectedPlan ，其中包含將被編輯的選定成員資格。

編輯表單將顯示selectedPlan ，當用戶編輯信息時，它不應直接更新主計划state，而是更新selectedPlan 。 計划state 只有在用戶單擊“更新按鈕”（您的圖像顯示為創建按鈕）時才會更新。

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

在這里，我們克隆計划並使用id屬性作為助手更新所選計划。

要更新受控輸入中的特征數組，可以在value處使用toString()方法，在onChange處可以拆分輸入。

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

你可以在這里看到最小的例子：