javascript 对象作为React子对象无效d

zd287kbt  于 2023-03-28  发布在  Java
关注(0)|答案(1)|浏览(114)

我有一个嵌套数组中的数组对象,当我试图在jsx中呈现它以打印名称和值时,它给我一个错误obejcts无效
这就是我的数据看起来的样子:

const [avail, setavail] = useState({
      firstName: '',
      lastName: '',
      mobileNumber: '',
      doctorId: '',
      avalabilities: [
          {
              availabilityId: '',
              day: [
                { name: 'Sunday', value: 'Sunday' },
                { name: 'Monday', value: 'Monday' },
                { name: 'Tuesday', value: 'Tuesday' },
                { name: 'Wednesday', value: 'Wednesday' },
                { name: 'Thursday', value: 'Thursday' },
                { name: 'Friday', value: 'Friday' },
                { name: 'Saturday', value: 'Saturday' },
              ],
              isChecked: false,
              checked: false,
              allChecked: false,
              error: null
          }
      ]
  });

这里我尝试在jsx中使用map进行渲染

{avail.avalabilities.map((av, avIndex) => (
                    <div key={av.availabilityId}>
                   
                   {av.day.map((item, index) => (
                    <div key={index}>
                            <input
                              checked={item?.checked || false}
                              name={item.name}
                              value={item.value}
                              onChange={(e) =>
                                checkedHandler(e, avIndex, index)
                              }
                              type="checkbox"
                              id={item.value}
                            />
                               {console.log(item.name)}
                               {console.log(item.value)}
                            <label htmlFor={item.value}>{item.name}</label>
                          </div> 
                        
                      ))}

但是它给了我一个错误的对象不是每次都有效的。希望在这里得到解决。

const checkedHandler = (e, avIndex, index) => {
    console.log(e.target.checked, avIndex, index);
    setavail((prev) => {
      let newState = { ...prev };
      newState.avalabilities[avIndex].day[index].checked = e.target.checked;
      return newState;
    });
  };
xzabzqsa

xzabzqsa1#

您似乎没有格式良好的代码。缺少一个结束分割标记。请使用此标记。

avail.avalabilities.map(
                        (av, avIndex) => (
                            <div key={av.availabilityId}>
                            {
                                av.day.map(
                                    (item, index) => (
                                        <div key={index}>
                                            <input
                                            checked={item?.checked || false}
                                            name={item.name}
                                            value={item.value}
                                            onChange={(e) =>
                                                checkedHandler(e, avIndex, index)
                                            }
                                            type="checkbox"
                                            id={item.value}
                                            />
                                            {console.log(item.name)}
                                            {console.log(item.value)}
                                            <label htmlFor={item.value}>{item.name}</label>
                                        </div>
                                    )
                                )
                            }
                            </div>
                        )
                    )

相关问题