我没有在子组件中获得反应道具的预期价值

Question

我正在尝试在 React js 应用程序（我正在维护）中管理一些客户端，它最初是用类组件编写的，但我现在正在添加一个功能性子组件，但我没有确定这是否是问题的根源（react-table 示例仅使用功能组件）

我有一个主要组件，它将从 rest API 获取数据并将其保存在状态“entries”，然后我将其传递给子组件作为在 react-table 中呈现数据的道具，问题出在本节中，因为我有一些按钮可以在 react-modal 中编辑和删除数据，当我尝试访问 props.entries 之后按钮点击我有一个空数组 props.entries.

这是问题的沙箱：https://codesandbox.io/s/stale-prop-one-forked-r6cevx?file=/src/App.js

我在点击删除按钮时做了一个console.log，你可以看到en entries数组是空的。

Answer 1

您需要在 useMemo 依赖数组中传递 showEditModal & showEditModal。因为你的依赖数组是空的，当你点击编辑或删除时，它只是指向旧的函数引用并且它有旧的条目值。

您可以通过console.log检查条目值。

希望这能解决您的问题

    const showEditModal = useCallback(
        (client_id) => {
            const tmpClient = props.entries.filter(function (el) {
                return el._id === client_id;
            })[0];
            setClient(tmpClient);
            setEditModal(true);

            console.log('aaa', props);

            console.log(client_id);
            console.log(props.entries);
            console.log(tmpClient);
        },
        [props.entries]
    );

    const showDeleteModal = useCallback(
        (client_id) => {
            console.log('showDeleteModal entries : ', entries);
            const tmpClient = entries.filter(function (el) {
                return el._id === client_id;
            })[0];
            setClient(tmpClient);
            setDeleteModal(true);

            console.log('Delete', entries);
            console.log(client_id);
            console.log(tmpClient);
        },
        [props.entries]
    );

    const columns = React.useMemo(
        () => [
            {
                Header: 'fact',
                accessor: 'fact'
            },
            {
                Header: 'Actions',
                accessor: 'length',
                Cell: ({ cell }) => (
                    <>
                        {cell.row.values.length}
                        <Tooltip title='Supprimer' placement='top'>
                            <IconButton
                                variant='outlined'
                                id={cell.row.values._id}
                                onClick={() => showDeleteModal(cell.row.values.length)}
                            >
                                <DeleteIcon />
                            </IconButton>
                        </Tooltip>
                        <Tooltip title='Modifier' placement='top'>
                            <IconButton
                                variant='outlined'
                                id={cell.row.values.length}
                                onClick={() => showEditModal(cell.row.values.length)}
                            >
                                <EditIcon />
                            </IconButton>
                        </Tooltip>
                    </>
                )
            }
        ],
        [showEditModal, showDeleteModal]
    );

我没有在子组件中获得反应道具的预期价值

I don't get the expected value of a react props in child component

reactjs

react-modal

react-table-v7