如何从javascript中的API调用返回值给React组件

Question

我似乎不能在javascript中返回这个API调用的值到我的react组件。我有一个调用API的java脚本文件。在js文件中，返回结果，但是当我在react组件中调用useEffect中的js函数时，它返回undefined。

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)
})
}

这是我的rect组件

导出默认函数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)
}, [])

........

可变负载为空

Answer 1

你需要使用React钩子来调用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>

Answer 2

我发现最干净的方法是

将父组件改为this

useEffect(() => {
newFunctionName();
}, [])
async function newFunctionName(){
const response = await ordersData();
console.log(response)
// you can then set all your states directly in here
}

更改api调用组件为this

export default async function ordersData() {
try{
const res = await fetch('xxxxxxxxxxxx' + process.env.REACT_API)
return res
} catch(err){
console.log(err)
return(err)
}
}

现在你在父组件中有了响应，可以从那里设置状态。

Answer 3

这个函数不返回任何东西。你只需要推入数据中的有效载荷值，那是一个局部变量。你可以通过setState使用state和set value。