我是React.js的新手，我实际上正在尝试创建一个以以下方式构建的页面：

• 一个表单，用于插入[版本、日期、图像、内容]并通过POST请求发布JSON（使用Axios）-一个显示部分，在其中，我通过单击按钮获得相同的数据并显示在屏幕上
  实际上，我可以通过在使用的组件中引入Get和Post逻辑来实现这一点。为了使用组件并拥有清晰的代码，我需要在不同的组件中有一个单独的组件来调用，以发出GET或POST请求。
  使用钩子我不能做到这一点。实际的代码是：
  这是UserGet.js

import axios from "axios";
import {useState} from "react";

const baseURL = "http://localhost:8088/";
const userURL ="changelog/version.txt";

function UserGet(props) {
    const [get, setGet] = useState(null);

        axios.get(baseURL+userURL).then((response) => {
            setGet(response.data);
        });

    return [get, setGet] ;

}

export default UserGet;

而在我想用作数据显示器的组件中：

const DisplayInfo =(props) => {

    const [items, setItems] = useState([]);

    const onFinish = (() => {
        setItems(UserGet());
    })

            const DisplayData = items.map(
                (info)=>{
                    return(
                        <div className='changelogDisplay' key={info.version}>  
                            <button className='version' >v  {info.version} </button>
                            <div className='datelog' > {info.data} </div>
                            <div className='dataHeader' > {info.title} </div>
                            <div className='whatsnew' > {info.text} </div>
                            <div className='imageLog' alt='Changelog pic' >{info.img} </div>
                        </div>
                    )
                });

    return(
        <div>
            <Form onFinish={onFinish}>
                <Form.Item>
                    <Button type="primary" htmlType="submit" name='Refresh'> Refresh list</Button>
                        <div className='displayData'>    
                            {DisplayData}
                        </div>
                    </Form.Item>
            </Form> 
        </div>
    )
}

export default DisplayInfo;

实际上如果我用

const response = UserGet();

我可以获取数据并插入到项目中以进行进一步处理。我想使用Onfinish或Onclick属性获取数据，但由于挂钩不能停留在函数内部，我无法获取数据。如何获得解决方案？
我尝试了不同的方法，我不想使用Redux的时刻，以提高我的知识在这方面。
钩子对我来说没那么简单