开发者问题收集

在 React js 中使用已检查处理程序实现动态复选框

2022-04-03
2094
arrays reactjs object checkbox dynamicform

我在设置数组的动态复选框的状态时遇到了问题，无法使用 checked 处理程序将对象从 false 更改为 true。

以下是我的代码： 

const [form, setForm] = useState({
    tags:[
     { name: "Athletic/Higher caloric", isChecked: false },
     { name: "Aggressive Weight Loss", isChecked: false },
     { name: "Quick and Easy", isChecked: false } ]})

const onCheckedHandler = (index) => {
      const updatedTags = 
        form.tags.map((tag, i) => {
           if (index === i) {
             form.tags[i].isChecked = !form.tags[i].isChecked;
             } 
           return { tag }; 
        }); 

    setForm(updatedTags);


return (
   {form.tags.map((tag, i) => (
        <div>
        <label>{tag.name}</label> 
        <input 
           type="checkbox"
           checked={tag.isChecked}
           onChange={(event) => onCheckedHandler(i)}
           key={i} /> 
        </div>
       ))})

我收到此错误：“未捕获 TypeError：无法读取 Create（行：107）处未定义的属性（读取‘map’）”

但第 107 行只是另一个 map 函数的开始，该函数有效且完全不相关。我做错了什么？我尝试避免使用 if 语句直接在对象中改变 isChecked 值。也许这是我设置状态的方式？

2个回答

据我了解：

  • 初始状态是一个对象 const [form, setForm] = useState({...});
  • 这有一个名为 tags 的 prop。
  • 但是，变量 updatedTags （在处理程序方法中）是一个数组。它不是一个对象。
  • 因此，setForm(updatedTags) 将把 form 设置为一个数组，该数组不会有任何名为 tags 的 prop。

因此，请尝试像这样更改处理程序： 

const onCheckedHandler = (index) => {
  setForm(prev => ({
    ...prev,
    tags: [
      ...prev?.tags?.map(
        ({isChecked, ...rest}, idx) => (
          idx === index
          ? {...rest, isChecked: !isChecked}
          : {...rest, isChecked}
        )
      )
    ]
  }));
};

此外，在尝试映射 return 之前也请使用检查。可以尝试类似这样的方法：

form?.tags?.map(...)

或者

form && form.tags && Array.isArray(form.tags) && form.tags.map(...)

jsN00b
2022-04-03

问题可能出在这里： 

return (
   {form.tags.map((tag, i) => (
        <div>
        <label>{tag.name}</label> 
        <input 
           type="checkbox"
           checked={tag.isChecked}
           onChange={(event) => onCheckedHandler(i)}
           key={i} /> 
        </div>))}
)

问题是您尝试使用 form 状态进行渲染，而该状态在安装（组件）时可能为 undefined 。由于您的错误表明 cannot read property of undefined, reading map ，它可能指的是 form.tags 未定义，无法读取其映射。

一个好主意是在渲染之前检查您尝试渲染的内容是否已定义。例如： 

return (
   {form.tags ? form.tags.map((tag, i) => (
        <div>
        <label>{tag.name}</label> 
        <input 
           type="checkbox"
           checked={tag.isChecked}
           onChange={(event) => onCheckedHandler(i)}
           key={i} /> 
        </div>)) : <div>Loading</div>}
)
frostzt
2022-04-03