Javascript 从POST API获取数据后呈现功能组件？

我想在从API获取数据后重新呈现组件。我用钩子来处理。但它不起作用。实际上，我的组件是第一次呈现的，而不是在获取数据之后

---

我有一个外部功能。通过此功能，我可以为该省指定一个省名，然后收到该省城市的列表。我的功能如下：

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

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

const axios=require（'axios'）；
导出默认异步函数getCities（状态）{
设res=[]，err；
试一试{
等待axios.post（'someUrl'{
ProvinceUser:state，
}).然后（功能（响应）{
如果（response.status==200）{
for（设i=0；i

---

我正在我的组件中使用上述函数，如下所示：

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

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

import React，{useffect}来自“React”；
从“./functions/getCities”导入getCities；
从“/RadioList”导入放射科医生；
导出默认函数列表状态（道具）{
让标签=[]，
城市=[]；
useffect（（）=>{
getCities（props.cityState）。然后（（数组）=>{
for（设i=0；i
)}
);
}

---

可以说：

我在

useffect

中使用了

console.log（标签）

。一切都很好 使用

标签

数组。只需更新组件即可

我在

useffect

中为DEP使用了

labels

数组。但事实并非如此 成功了

---

那么，哪些部分出错了？

简单地更新变量的值不会触发渲染，但是如果使用

useState（）

hook将标签声明为状态数组，则更新它会触发渲染

注意：使用索引作为键是一种反模式，这只会在以后导致麻烦，请为每个元素选择一个唯一标识符作为键

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

import React，{useffect，useState}来自“React”；
从“./functions/getCities”导入getCities；
从“/RadioList”导入放射科医生；
导出默认函数列表状态（道具）{
const[labels，setLabels]=useState（[]）；
康斯特城市=[]；
useffect（（）=>{
getCities（props.cityState）。然后（（数组）=>{
for（设i=0；i
)}
);
}

简单地更新变量的值不会触发渲染，但是如果您使用

useState（）

钩子将标签声明为状态数组，则更新变量的值将不会触发渲染。我使用状态来处理它。但我无法将数据放入状态。对于数组，我们使用

array.push（某物）

。那么，你能给出一个答案并告诉我如何使用状态来实现吗？您好，我再次尝试使用

redux

而不是纯反应状态。它不起作用。我在这个帖子的另一个答案中发布了我的代码。你能读一下并帮我吗？我想如果你把它作为一个单独的问题贴出来，你会得到更好的回答，而且把一个问题作为答案贴出来也有点离题。