我有一个嵌套数组中的数组对象,当我试图在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;
});
};
1条答案
按热度按时间xzabzqsa1#
您似乎没有格式良好的代码。缺少一个结束分割标记。请使用此标记。