useState 不读取 if 语句之外的变量

Question

我试图在“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,
    });
  }
};

有什么建议吗？谢谢

Answer 1

虽然您可以使用 let 提前声明 list...

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

Answer 2

将 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,
  });
};

应该可以解决问题。

Answer 3

在 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,
    });
  }
};

useState 不读取 if 语句之外的变量

useState not reading variable outside of if statement

if-statement

reactjs

use-state