当我无法设置初始属性时,我在更新处于React状态的对象时遇到问题。
在初始状态下,我有一个空对象
然后我有一个处理复选框更改的功能
我会在API响应后生成带有复选框的字段,因此由于数字或ID的更改,我无法将它们设置为初始状态。用什么方式处理呢?当我尝试选中复选框时,对象中只有一个属性。
这是我的组件:
const Emails = () => {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
const [checkedItems, setCheckedItems] = useState({});
const { eventId } = useParams();
const handleCheckboxes = (event) => {
setCheckedItems({
...checkedItems,
[event.target.id]: event.target.checked
})
}
useEffect(() => {
fetchEmails();
}, [])
const fetchEmails = async () => {
try {
const resp = await axios.get(`${url}/${eventId}`);
const newRows = resp.data.map(row => ({
emailId: row.id,
emailName: row.name,
emailCheckbox: <MDBInput label=" " value={checkedItems[row.id]} id={row.id} type="checkbox" onChange={handleCheckboxes}/>
}))
setData({
columns: [
{
label: 'Email ID',
field: 'emailId'
},
{
label: 'Email name',
field: 'emailName'
},
{
label: 'Email checkbox',
field: 'emailCheckbox'
}
],
rows: newRows
});
} catch(error) {
setError(error.response);
}
}
return (
<>
{error ? (
<h1>{error.data.message}</h1>
) : (
data ? (
<Fragment>
<h1>Event ID: {eventId}</h1>
<MDBDataTable data={data}/>
</Fragment>
) : (
<div className="text-center">
<MDBSpinner big/>
</div>
)
)}
</>
)
}