useState不讀取if陳述句之外的變數-有解無憂

我試圖在“if”陳述句中設定一個變數“list”，然后通過useState更新我的資料，但是如果我在“if”陳述句之外寫setData，它表明變數“list”不是定義，所以我必須重寫“if”和“else”陳述句中的所有代碼（這是不可取的）

const [data, setData] = useState({
  name: "",
  email: "",
  machinetype: [],
});

const handleInputChange = (event) => {
  if (event.target.name === "machinetype") {
    const chck = event.target.checked;
    if (chck) {
      const list = data[event.target.name].concat([event.target.value]);
    } else {
      const index = data[event.target.name].indexOf(event.target.value);
      const remove = data[event.target.name].splice(index, 1);
      const list = data[event.target.name];
    }
    setData({
      ...data,
      [event.target.name]: list,
    });
  }
};

有什么建議嗎？謝謝

uj5u.com熱心網友回復：

將 if 的宣告list移到 ifs 之外。

您還需要確保在不復制串列的情況下不會在內部修改串列，因此總而言之

const [data, setData] = useState({
  name: "",
  email: "",
  machinetype: [],
});

const handleInputChange = (event) => {
  const {name} = event.target;
  if (name !== "machinetype") {  // early return to make the function shallower
    return;
  }
  const list = [...data[name]]; // shallow copy
  if (event.target.checked) {
    list.push(event.target.value);
  } else {
    const index = list.indexOf(event.target.value);
    list.splice(index, 1);
  }
  setData({
    ...data,
    [name]: list,
  });
};

應該做的伎倆。

uj5u.com熱心網友回復：

在 if 陳述句中宣告的變數保留在 if 陳述句的范圍內。因此，當指標離開 if 塊時，變數將被處理。

您需要做的就是以下內容

const [data, setData] = useState({
  name: "",
  email: "",
  machinetype: [],
});

const handleInputChange = (event) => {
  if (event.target.name === "machinetype") {
    const chck = event.target.checked;
    let list = null;
    if (chck) {
      list = data[event.target.name].concat([event.target.value]);
    } else {
      const index = data[event.target.name].indexOf(event.target.value);
      const remove = data[event.target.name].splice(index, 1);
      list = data[event.target.name];
    }
    setData({
      ...data,
      [event.target.name]: list,
    });
  }
};

uj5u.com熱心網友回復：

雖然您可以list提前宣告let...

if (event.target.name === "machinetype"){
  const chck = event.target.checked
  let list;
  // assign to list...

IMO 更好的方法是將兩種可能性合并為一個運算式。

if (!chck) {
    // this block doesn't make much sense though
    const index = data[event.target.name].indexOf(event.target.value);
    const remove = data[event.target.name].splice(index, 1);
}
const list = data[event.target.name].concat(chck ? [event.target.value] : []);
setData({
  ...data,
  [event.target.name]: list,
});

但是分配給未使用的變數remove是沒有意義的，并且在 React 中永遠不應該對狀態進行更改。最好做類似的事情

const handleInputChange = ({ target }) => {
    const { name, value, checked } = target;
    if (name !== "machinetype") return;
    if (checked) {
        setData({
            ...data,
            [name]: [...data[name], value],
        });
    } else {
        setData({
            ...data,
            [name]: data[name].filter(existingVal => existingVal !== value)
        });
    }
};

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/316351.html

標籤：反应 if 语句使用状态

上一篇：多個ifelse條件的替代方案，使其在單行中-javascript

下一篇：在python中的串列中添加條件