Usestate + Setstate [TypeError: Invalid attempt to spread non-iterable instance.] - React Native Form Handling

Question

我正在嘗試通過添加一個名為“計費”的新 object 來更新 state。 我最初的 state 看起來像這樣：

const [data, setData] = useState({
    payment_method: 'bacs',
    payment_method_title: 'Direct Bank Transfer',
    set_paid: true,
    line_items: [
      {
        product_id: 93,
        quantity: 2,
      },
    ],
  });

添加表單數據后，我希望它看起來像這樣：

const [data, setData] = useState({
    payment_method: 'bacs',
    payment_method_title: 'Direct Bank Transfer',
    set_paid: true,
    line_items: [
      {
        product_id: 93,
        quantity: 2,
      },
      {
        product_id: 22,
        variation_id: 23,
        quantity: 1,
      },
    ],
    shipping_lines: [
      {
        method_id: 'flat_rate',
        method_title: 'Flat Rate',
        total: 10,
      },
    ],
 billing: {
        first_name: "John",
        last_name: "Doe",
      },
  });

但是，當我運行此 function 時，我收到一個 typeError 說我無法傳播 state。 Billing 包含來自 Formik 的 object 中的數據，如下所示{"first_name": "", "last_name": ""} ：

  const addData = (billing) => {
    setData((currentData) => {
      return [billing, ...currentData];
    });
  };

如何重組我的 state 陣列或傳播 currentState 以便我可以添加我的帳單 object。

Answer 1

Yout state data是 object 不是數組，這就是[billing, ...currentData]失敗的原因。

您需要像這樣設置它：

const addData = (billing) => {
  setData((currentData) => {
    return { billing, ...currentData };  // <<< spread inside an object
  });
};

Answer 2

您正在嘗試將 object 傳播到數組中，因此出現錯誤。 確保您的 state 中有{}而不是[] ，然后您可以進一步清潔它，如下所示：

const addData = (billing) => setData((currentData) => {billing, ...currentData});