更新 State React 的一個元素

Question

我有一個問題，有點難以解釋。

我使用 Hooks 從我從 API 接收的數據中設置狀態。 我在我的前端顯示它，沒問題。

我想從一個元素更新一個值。

這是我的完整組件：

import { UidContext } from "../components/AppContext"
import { totalIncome, totalFees, balance } from "./balance.utils"
import React, { useContext, useEffect, useState } from "react"
import axios from "axios"

export default function Balance() {
    const uid = useContext(UidContext)
    const [userWalletIncomes, setUserWalletIncomes] = useState('')
    const [userWalletFees, setUserWalletFees] = useState('')
    const [formIncomes, setformIncomes] = useState(false)

    useEffect(() => {
        if (uid !== null) {
            axios.get(`${process.env.REACT_APP_API_URL}api/balance/${uid}`)
                .then((res) => {
                    setUserWalletIncomes(res.data[0].incomes)
                    setUserWalletFees(res.data[0].fees)
                })
        }
    }, [uid])

    return (
        <div className="h-screen">
            <section className="border my-2 w-max md:w-11/12 mx-auto text-center">
                <h1 className="text-3xl my-5">Revenus</h1>

                {formIncomes === false && (
                    Object.entries(userWalletIncomes).map(([key, value]) => {
                        return (
                            <div className="text-left mx-auto flex" key={key}>
                                <p className="w-32 border p-1 capitalize">{key} :</p>
                                <p onClick={(e) => setformIncomes(true)} className="w-32 border p-1 text-green-500">{value}€</p>
                            </div>
                        )
                    })
                )}
                {formIncomes === true && (
                    Object.entries(userWalletIncomes).map(([key, value]) => {
                        return (
                            <div className="text-left mx-auto flex" key={key}>
                                <p className="w-32 border p-1">{key} :</p>
                                <input className="w-32 border p-1 text-green-500"
                                    value={value}
                                    onChange={(e) => setUserWalletIncomes(value)} />
                            </div>
                        )
                    })
                )}
            </section>
        </div>
    )
}

因此，當我單擊我的<p> ，它會轉換為輸入。 然后我想修改收入金額，並將其設置為狀態。

有關信息，我的收藏 (mongo) 如下所示：

{
    "_id": {
        "$oid": "60c763df3d260204865d2069"
    },
    "incomes": {
        "salaire1": 1130,
        "salaire2": 640,
        "Prime": 90
    },
    "__v": 0,
    "fees": {
        "Box": 35,
    }
}

所以我只需要更新收入類別，並且只需要更新所選鍵的金額。 不知道我說清楚了沒有...

任何的想法 ？

附加信息：輸入中的 setUserWalletIncomes 擦除所有狀態，並將其替換為輸入中的唯一值。

Answer 1

您可以利用對象解構來做到這一點

setUserWalletIncomes({...userWalletIncomes, incomes: {...userWalletIncomes.incomes, [keySelected]: value}});

有關此問題的更多信息，請參閱MDN 文檔。

編輯：由於您的 Object.entries 功能，您已經擁有它。 完整代碼見下文。

<input className="w-32 border p-1 text-green-500"
                                    value={value}
                                    onChange={(e) => setUserWalletIncomes({...userWalletIncomes, incomes: {...userWalletIncomes.incomes, [key]: e.target.value}})} />

Answer 2

你只想要一張這樣的地圖：

Object.entries(userWalletIncomes).map(([key, value]) => {
    return (
      <div className="text-left mx-auto flex" key={key}>
        <p
          className={`w-32 border p-1 ${
            formIncomes === key ? "capitalize" : ""
          }`}
        >
          {key} :
        </p>
        {formIncomes === key ? (
          <input
            className="w-32 border p-1 text-green-500"
            value={value}
            onChange={(e) =>
              setUserWalletIncomes({
                ...userWalletIncomes,
                [key]: e.target.value,
              })
            }
          />
        ) : (
          <p
            onClick={(e) => setformIncomes(key)}
            className="w-32 border p-1 text-green-500"
          >
            {value}€
          </p>
        )}
      </div>
    );
  });