我似乎无法将 javascript 中此 API 调用的值返回到我的 React 组件。我有一个调用 API 的 java 脚本文件。在js文件中,返回结果,但是当我在react组件中调用useEffect中的js函数时,它返回未定义。
export function ordersData() {
const partner_code = localStorage.getItem('partner_code')
let items = []
let data = []
let isLoaded = false
let error = ''
fetch('xxxxxxxxxxxx' + process.env.REACT_API)
.then(res => res.json())
.then((result) => {
for (let instance in result['docs']) {
let payload = (result['docs'][instance])
payload.id = instance
payload.timestamp = shortMonthYear(payload.timestamp)
data.push(payload)
}
items = data.reverse()
}, (err) => {
isLoaded(true)
error(err)
})
}
这是我的反应组件
导出默认函数 OrdersChart() {
const [payload, setPayload] = useState([])
const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);
const [items, setItems] = useState([]);
useEffect(() => {
setPayload = ordersData()
console.log(payload)
}, [])
........
变量有效负载为空
您需要使用 React hooks 进行 API 调用并存储数据。您可以使用useEffect
调用 API 并使用的钩子useState
用于在状态中存储数据。
const { useState } = React;
function useFetchData() {
const [loading, setLoading] = React.useState([]);
const [data, setData] = React.useState([]);
React.useEffect(() => {
setLoading(true);
fetch("https://randomuser.me/api/?results=10")
.then((response) => response.json())
.then((responseJson) => {
setData(responseJson.results);
setLoading(false);
})
.catch((error) => {
console.error(error);
setLoading(false);
});
}, []);
return { loading, data };
}
function App() {
const { loading, data } = useFetchData();
if(loading){
return <p>Loading... </p>
}
return (
<div>
{data.map((item) => (
<div>{item.name.first}</div>
))}
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)