我是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的时刻,以提高我的知识在这方面。
钩子对我来说没那么简单
1条答案
按热度按时间lbsnaicq1#
目前,您正在将
items
状态设置为从UserGet
挂钩返回的[get, setGet]
值。在这里,您将从请求返回数据。
然后在
onFinish
我希望这对你的项目有帮助!