Question

我想为我的组件使用钩子，以呈现复选框列表并能够独立更新每个复选框的状态。

我正在使用useSelector（）来检索以前使用useDispatch（）从UI检索到的复选框的数据

function Example() {
    const [checkboxStates, setCheckboxStates] = React.useState({});

    // TODO: Implement functionality
    const handleChange = name => event => {
        setCheckboxStates({ ...checkboxStates, [name]: event.target.checked });
    };

    const userToken = useSelector(state => state.user.token);
    const locale = useSelector(state => state.translations.locale);
    const listOfElements = useSelector(
        state => state.x.listOfElements
    );

    const dispatch = useDispatch();
    const getListOfElements = useCallback(
        (parameters, token) =>
            dispatch(
                Actions.getListOfElements(parameters, token)
            ),
        [dispatch]
    );

    useEffect(() => {
        getListOfElements(
            { language: locale, version: new Date().getFullYear() },
            userToken
        );
    }, [getListOfElements, locale, userToken]);

    return listOfElements.map(item => (
        <FormControlLabel
            key={item.id}
            control={
                <Checkbox
                    checked={item.checked}
                    // TODO: Handle onChange
                />
            }
            label={item.name}
        />
    ));
};

我希望我可以更新复选框的状态并将这些数据再次发送回api，但是现在我不知道如何在钩子版本中实现onChange处理程序。

在没有挂钩的版本中，我会将redux商店映射到组件的props和状态。

Answer 1

这是我的工作示例。关键是调用直接在您的 onChange（）处理程序中更新远程服务器上的值的函数。

此外，您可以更新自己的reducer以直接在redux存储中反映这些更改，而无需再次请求远程服务器的数据。

function Example() {
    const userToken = useSelector(state => state.user.token);
    const locale = useSelector(state => state.translations.locale);
    const listOfElements = useSelector(state => state.x.listOfElements);

    const dispatch = useDispatch();
    const getListOfElements = useCallback(
        (parameters, token) =>
            dispatch(Actions.getListOfElements(parameters, token)),
        [dispatch]
    );
    const updateElementOnRemote = useCallback(
        (parameters, token) =>
            dispatch(Actions.updateElementOnRemote(parameters, token)),
        [dispatch]
    );

    useEffect(() => {
        getListOfElements(
            { language: locale, version: new Date().getFullYear() },
            userToken
        );
    }, [getListOfElements, locale, userToken]);

    const handleChange = event => {
        updateElementOnRemote(
            {
                language: locale,
                version,
                value: {
                    id: event.target.id,
                    checked: event.target.checked,
                },
            },
            userToken
        );
    };

    return listOfElements.map(item => (
        <FormControlLabel
            key={item.id}
            control={
                <Checkbox
                    id={item.id}
                    checked={item.checked}
                    onChange={handleChange}
                />
            }
            label={item.name}
        />
    ));
}

从api渲染复选框列表并使用钩子发送更新

1 个答案: