useState没有读取if语句外的变量

Question

我正在尝试设置一个变量"list"在&;if&;语句，之后，通过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

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

Answer 2

将list的声明移出if。

你还需要确保你没有在内部修改列表而不复制它，所以总而言之，像

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

可以用let提前声明list…

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

在我看来，一个更好的方法是将这两种可能性合并到一个表达式中。

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