Question

我有一个表格，当您编辑表格时，您会更改对象支付的数据

amount: 17732
currency: ""
dateCreated: "2021-03-20T17:28:59.090Z"
description: ""
id: "1c6a731e-63ce-46a8-b5f3-f8e6bdfc7c6a"
paid: false
paymentMethod: ""
payoutName: "Herman Friesen"

最初这个对象嵌套在另一个名为 company 的对象内的支出数组中


  "id": "3939d78e-3993-4c48-949a-fc168023ce7b",
  "companyName": "Kub, Jerde and Heidenreich",
  "payout": [
    {
      "id": "4e8042c4-9d27-4aad-bb6d-1a0606d518d5",
      "payoutName": "Fernando Corkery",
      "description": "",
      "amount": 47033,
      "paymentMethod": "",
      "currency": "",
      "paid": false,
      "dateCreated": "2021-03-20T12:40:49.570Z"
    },
    {
      "id": "c57b5aeb-c4fe-41c6-a745-7a79aebfc9f9",
      "payoutName": "Regina Johns",
      "description": "",
      "amount": 11140,
      "paymentMethod": "",
      "currency": "",
      "paid": false,
      "dateCreated": "2021-03-20T14:24:23.982Z"
    }]

我通过这个 useEffect 得到了回报如果有人想知道，余额看起来像上面的对象

const { companyId, id } = useParams();
const [payout, setPayout] = useState([]);
const [companyUpdated, setCompanyUpdated] = useState([]);

useEffect(() => {
    let isMounted = true;
    const getBalance = async () => {
      try {
        const { data: balance } = await api.balances.getCompany(companyId);
        if (!isMounted) return;
        setCompanyUpdated(balance);
        balance.payout?.map((x) => {
          if (x.id === id) {
            return setPayout(x);
          }
        });
      } catch (e) {
        console.error(e);
      }
    };
    getBalance();
    return () => {
      isMounted = false;
    };
  }, [companyId, id]);

看到payout本质上是companyUpdated对象的array[n]，我想我会使用payout更新companyUpdated的状态，然后用put api推送companyUpdated，但我不确定如何做到这一点，下面的useEffect可能无法正常工作，并且此 useEffect dint 的其他变体确实适用于保持支出数组

useEffect(() => {
    setCompanyUpdated((prev) => ({
      ...prev,
      payout: [...prev].payout?.filter((x) => x.id !== id).push(payout),
    }));
  }, [id]);

   const handleSubmit = (e) => {
       e.preventDefault();
       api.balances.updateBalance(companyId, companyUpdated);
    };

改变对象内数组的状态

0 个答案: