问题描述
我想在从我的 API 获取数据后重新渲染我的组件.我用钩子来处理.但它不起作用.实际上我的组件是第一次渲染,而不是在获取数据之后!
I want to re-render my component after the data fetched from my API. I used hooks to handle that. but it does not working. actually my component renders for the first time, not after fetching data!
我有一个外部函数.通过这个功能,我可以给那个省一个省名,然后接收他们在那个省的城市列表.我的功能如下:
I have an external function. By this function, I can give a province name to that and then receive a list of the cities which they are in that province. my function is like below:
const axios = require('axios');
export default async function getCities(state) {
let res = [], err;
try {
await axios.post('someUrl', {
ProvinceUser: state,
}).then(function (response) {
if (response.status === 200) {
for (let i = 0; i < response.data.length; i++)
res.push(response.data[i].CityUser);
}
}).catch(function (error) {
err = error;
});
} catch (error) {
err = error;
}
return {
response: res,
error: err
}
}
我在我的组件中使用上述函数,如下所示:
I'm using the above function in my component like below:
import React, {useEffect} from "react";
import getCities from "../functions/getCities";
import RadioList from "./RadioList";
export default function ListOfStates(props) {
let labels = [],
cities = [];
useEffect(() => {
getCities(props.cityState).then((array) => {
for (let i = 0; i < array.response.length; i++)
cities.push(array.response[i]);
labels = cities;
});
}, []);
return (<>
{labels.map((labels, index) =>
<RadioList active={(labels === props.active)} key={index} label={labels}/>)}
</>);
}
说得好:
- 我在
useEffect
中使用了console.log(labels)
.一切都很好带有labels
数组.只需更新组件即可. - 我在
useEffect
中使用了labels
数组作为 deps.但它没有工作.
- I used
console.log(labels)
inuseEffect
. and everything is okaywithlabels
array. just the component should be updated. - I used
labels
array for the deps inuseEffect
. but it does notworked.
那么,哪些部分出了问题?
So, which parts are going wrong?
推荐答案
简单地更新变量的值不会触发渲染,但是如果您使用 useState() 钩子会更新它.
Simply updating the value of a variable won't trigger a render, however if you declare your labels as a state array using the
useState()
hook updating it will.
注意: 使用索引作为键是一种反模式,只会在以后带来麻烦,请为每个元素选择一个唯一的标识符作为键.
Note: Using index as a key is an anti-pattern which will only lead to headaches later, choose a unique identifier for each element to use as key instead.
import React, { useEffect, useState } from "react";
import getCities from "../functions/getCities";
import RadioList from "./RadioList";
export default function ListOfStates(props) {
const [labels, setLabels] = useState([]);
const cities = [];
useEffect(() => {
getCities(props.cityState).then((array) => {
for (let i = 0; i < array.response.length; i++) {
cities.push(array.response[i]);
}
setLabels([...cities]);
});
}, []);
return (
<>
{labels.length && labels.map((labels, index) =>
<RadioList active={(labels === props.active)} key={labels.id} label={labels} />)}
</>
);
}
这篇关于从 POST API 获取数据后渲染功能组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!