更新 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>
    );
  });