嘗試從物件中洗掉鍵和值，但是當我嘗試洗掉它時會破壞某些功能

我正在嘗試創建一個添加 div 按鈕和一個洗掉 div 按鈕。當您選擇某個 div 并單擊洗掉時，我只想從物件中洗掉該鍵。問題是當我洗掉然后嘗試創建一個新的 div 時，它不再創建新的 div...不知道我做錯了什么或為什么它只能作業。

import "./styles.css";
import {
  useEffect,
  useState
} from "react";

// The parent component
const App = () => {
  const [textBoxDivs, setTextBoxDivs] = useState({});

  const addNewTextBox = () => {
    const numOfTextBoxDivs = Object.keys(textBoxDivs).length;
    console.log(numOfTextBoxDivs, "num");
    setTextBoxDivs({
      ...textBoxDivs,
      [`div${numOfTextBoxDivs   1}`]: {
        isSelected: false,
        innerText: "text"
      }
    });
  };

  const selectItem = (e) => {
    const nextState = { ...textBoxDivs
    };
    Object.keys(nextState).forEach((k) => {
      nextState[k].isSelected = false;
    });
    nextState[e.target.id].isSelected = true;
    setTextBoxDivs(nextState);
  };

  const removeSelectedItem = () => {
    const nextState = { ...textBoxDivs
    };
    if (Object.keys(textBoxDivs).length > 0) {
      Object.keys(textBoxDivs).map((key) => {
        if (textBoxDivs[key].isSelected) {
          delete nextState[key];
          return setTextBoxDivs(nextState);
        }
        return null;
      });
    }
  };

  return ( <
    div >
    <
    button onClick = {
      () => addNewTextBox()
    } >
    Click me to create a selectable div <
    /button> <
    button onClick = {
      (e) => removeSelectedItem(e)
    } >
    Click me to delete a selectable div <
    /button> {
      Object.keys(textBoxDivs).length > 0 &&
        Object.keys(textBoxDivs).map((key, index) => {
          return ( <
            div style = {
              {
                border: textBoxDivs[key].isSelected ?
                  "2px solid green" :
                  "unset"
              }
            }
            onClick = {
              (e) => selectItem(e)
            }
            key = {
              index
            }
            id = {
              key
            } >
            {
              textBoxDivs[key].innerText
            } <
            /div>
          );
        })
    } <
    /div>
  );
};

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

uj5u.com熱心網友回復：

函式 addNewTextBox 中的代碼中的問題，特別是在該行中

[`div${numOfTextBoxDivs   1}`]: {

因為這并不一定意味著您要添加新行。在這種情況下，您正在為 (div number) 分配一個值，但有時該值已經存在。例如，如果您將該行更改為真正唯一的數字，例如日期，它會起作用：

const addNewTextBox = () => {
    const numOfTextBoxDivs = Object.keys(textBoxDivs).length;
    console.log(numOfTextBoxDivs, "num");
    setTextBoxDivs({
      ...textBoxDivs,
      [`div${new Date().getTime()}`]: {
        isSelected: false,
        innerText: "text"
      }
    });
  };

uj5u.com熱心網友回復：

更新 selectItem() 然后它作業：

const selectItem = (e) => {
    const nextState = { ...textBoxDivs, setTextBoxDivs }; // setTextBoxDivs was missing
    Object.keys(nextState).forEach((k) => {
      nextState[k].isSelected = false;
    });
    nextState[e.target.id].isSelected = true;
    setTextBoxDivs(nextState);
  };

標籤：javascript 反应

上一篇：為什么當JavaScript減少持續時間時影片沒有完成它的路徑

下一篇：創建一個只有日期的年份部分的復合唯一鍵約束