在外部组件回调时useState值为null

Question

我正在为多个网页创建多个按钮，并创建了一个名为 ToolButtons 的组件文件来完成所有工作。

import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import SendIcon from '@mui/icons-material/Send';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';

const defaultStyling = {
    flex: 1,
    marginLeft: '10px',
    marginRight: '10px',
    textTransform: 'none'
}

/**
 * This function loops through the button list and generates the button section of the page.
 *
 * @param props tools - Json array of buttons, title - Title for the button group, optional
 * @returns {JSX.Element}
 * @constructor
 */
function ToolButtons(props) {
    return (
        <Card variant='outlined' square>
            <CardContent sx={{
                display: "flex",
                flexDirection: 'column',
                height: '100%',
                padding: 1
            }}>
                <Typography gutterBottom variant='h4' align='center'>{props.title}</Typography>
                <Box sx ={{
                    flex: 1,
                    display: "flex",
                    padding: 2,
                }}>
                    {
                        props.tools.buttons.map(val => (
                            <Button key={val.name}
                                    sx={{...defaultStyling}}
                                    variant='contained'
                                    endIcon={<SendIcon />}
                                    onClick={val.clickHandler}
                                    >{val.text}</Button>
                        ))
                    }
                </Box>
            </CardContent>
        </Card>
    );
}
export default ToolButtons;

但是问题是在onClick的时候，使用的回调的useState值都是null。它就像回调实际上不是 LocationTool 区域的一部分而是 ToolButtons。我不知道该怎么办，从服务器获取新数据的回调出现在网页上，因此这些回调可以通过 setData() 设置数据变量并更新页面，但是当我尝试访问数据时它在我想发布数据 json 的提交按钮中说它为 null。我假设一定有某种方法可以对此进行编码，但我还没有看到任何通过这样的组件文件创建按钮的示例。所有这些都格式化了一个自定义按钮组件，然后在 return() 块中使用 ConstomButton 与这种方式相比，按钮列表和回调被传递到 ToolButtons。

function LocationTool() {
    const [data, setData] = useState(null);
    const [dataOrg, setDataOrg] = useState(cloneDeep(null));
    
    const handleSubmit = (event) => {
       let errorMsg = ValidateLocationFields(data); <== data is null for callback
    }

    return (
        use data to fill in fields, etc and then add buttons
        <ToolButtons tools={buttons} title=''/>
    );

我可以将数据作为 props 传递，但这应该是通用的，并且每个回调都有自己的 useState 变量，然后它不再是通用的按钮构建器并且将无法使用。那么，有什么办法可以解决这个问题，还是我必须回去为每个网页添加大卡片/按钮块，以便它们都在同一个功能区域？