在没有初始属性的情况下,如何以React状态更新对象?

时间:2019-12-02 10:19:46

标签: javascript reactjs object state

当我无法设置初始属性时,我在更新处于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>
                )
            )}
        </>
    )
}

0 个答案:

没有答案