如何在useState中設定新的鍵值，然后更新它們

我有一個 useState 設定為：

const [status, setStatus] = useState([{}])

我將 useState 用于資料回傳的 onChange：

[
   {id: 'abc', statuses: ['created', 'finished'],
   {id: 'def', statuses: ['created', 'started', 'finished']
]

狀態陣列中的專案可以隨著 onChange 改變（例如，狀態：['created'，'finished'] 可以變成狀態：['created'，'in progress'，'finished']）。我想知道如果 id 不存在于 useState 中，我如何最初為每個字典設定一個鍵值對，或者如果 id 確實存在，則更新狀態鍵值對。

我試圖初始化 useState，但我收到“預期 1 個引數，但得到 2 個”的錯誤，我不確定我是否正確地使用了擴展運算子：

useEffect(() => {
   setTransitionKeys(prev => [...prev], {id: newData.id, statuses: newData.statuses})

我嘗試使用以下方法更新 useState：

setStatus(
   status.map((value, index) => {
      if (value.id === onChangeData.id){
         return {
            ...value, statuses: onChangeData.statuses
         }
      }
   }
)

如果有更好的方法來解決這個問題，請告訴我。

uj5u.com熱心網友回復：

假設你說的是

state = [
   {id: 'abc', statuses: ['created', 'finished'],
   {id: 'def', statuses: ['created', 'started', 'finished']
]

你需要這樣做

[
   {id: 'abc', statuses: ['created', 'finished'],
   {id: 'def', statuses: ['created', 'started', 'finished'],
   {id: 'def', statuses: ['created', 'started', 'finished']
]

比你能做的

setState([...state, {id: 'def', statuses: ['created', 'started', 'finished']])

uj5u.com熱心網友回復：

假設在設定狀態時，新值將需要執行以下操作之一：

1. 陣列中不存在 > 添加到狀態陣列
2. 存在于陣列中 > 更新（替換）狀態陣列中的值

設定狀態時：

  setStatus((prev) => {

    // Get a new array from prev stat that excludes item with same id
    // If no value matches the id, it will be same as prev array

    const prevFiltered = prev.filter((value) => value.id !== onChangeData.id);

    // return the filtered array with new value
    // since the filter eliminated any duplicate value,
    // this will cover the case of adding and updating

    return [...prevFiltered, onChangeData];
  });

剛剛添加了一個完整的例子，希望能幫助你弄清楚：

import { useState } from "react";

function App() {
  const [status, setStatus] = useState([
    { id: "abc", statuses: ["created", "finished"] },
    { id: "def", statuses: ["created", "started", "finished"] },
  ]);


// can play around with these values to simulate different situations
  const addingData = { id: "ghi", statuses: ["created", "finished"] };
  const updatingData = {
    id: "abc",
    statuses: ["created", "started", "finished"],
  };

  const handleChange = (newData) => {
    setStatus((prev) => {
      const prevFiltered = prev.filter((value) => value.id !== newData.id);
      return [...prevFiltered, newData];
    });
  };

  return (
    <div>
      {/* simulate add some data (not existing id) */}
      <button onClick={() => handleChange(addingData)}>ADD</button>

      {/* simulate update some data (existing id) */}
      <button onClick={() => handleChange(updatingData)}>UPDATE</button>

      {/* log the current status */}
      <button onClick={() => console.log(status)}>LOG</button>
    </div>
  );
}

export default App;

如果仍然不清楚，也許發布實際用例會有所幫助，因為它有助于了解統計資料應該如何變化。

uj5u.com熱心網友回復：

我根據您的要求做了一個簡單的專案，并且邏輯在 handleToAddOrUpdateStatus起作用。

import { useRef, useState } from "react";

export default function App() {
  const inputIdRef = useRef();
  const inputStatusRef = useRef();

  const [data, setData] = useState([
    { id: "abc", statuses: ["created", "finished"] },
    { id: "def", statuses: ["created", "started", "finished"] }
  ]);

  const handleToAddOrUpdateStatus = () => {
    setData((prev) => {
      // get the enter values from "Id" input and "Add status" input
      const idValue = inputIdRef.current.value;
      const statusValue = inputStatusRef.current.value;

      // Check: does the id exist? True has exist | False hasn't exist
      const hasId = prev.some((status) => status.id === idValue);

      // If id exists => Update statuses property for the object duplicates id
      if (hasId) {
        const newData = [...prev].map((item) => {
          if (
            item.id === idValue &&
            item.statuses.every((element) => element !== statusValue)
          )
            return { ...item, statuses: [...item.statuses, statusValue] };
          return item;
        });
        return newData;
      }

      // If  id doesn't exist, add the new object.
      return [...prev, { id: idValue, statuses: [statusValue] }];
    });
  };

  return (
    <div className="App">
      <label id="id">ID: </label>
      <input type="text" id="id" ref={inputIdRef} />
      <br />
      <label id="status">Add Status: </label>
      <input type="text" id="status" ref={inputStatusRef} />
      <br />
      <button onClick={handleToAddOrUpdateStatus}>Add or Update data</button>

      <ul>
        {data.map((item) => (
          <li key={item.id}>{`${item.id}: ${item.statuses.join(", ")} `}</li>
        ))}
      </ul>
    </div>
  );
}

您可以像這樣演示它：https ://codesandbox.io/s/priceless-architecture-0kcmit?file=/src/App.js:327-998

標籤：javascript反应反应钩子

上一篇：如何在nextjs中通過<LInk>訪問從組件傳遞到頁面的資料

下一篇：如何使用視窗警報呈現組件