我的响应数据没有存储到react js中的变量中

Question

我试图将我的响应数据存储到activityType变量中，在useEffect中，我正在循环一个基于选项卡值的API, API将返回的值是true或false，我能够在我的控制台上获得值，但当我试图存储数据时，我得到空数组。

const tabs = [
// {value: 'All', label: `${i18n.t('AllActivity')}`},
{value: 'ActSendGift', label: `${i18n.t('Gifts')}`},
{value: 'ActSubscribe', label: `${i18n.t('Subscribers')}`},
{value: 'ActFollow', label: `${i18n.t('Followers')}`},
];
const activityType: any = [];
useEffect(() => {
async function fetchData() {
return tabs.map(async (item: any) => {
return await Api.user
.getSettingValues(item.value)
.then((response: any) => {
// console.log(response.settingValue); // true
// console.log(item.value); "ActSendGift"
return activityType.push(response.settingValue);
});
});
}
fetchData();
}, [activityFeedData.activityList, activityType]);

Answer 1

你可以使用'useState'钩子，而不是在react中声明一个变量。

首先需要导入钩子

import {useState, useEffect} from 'react'

，在你的功能组件中，你可以在获取数据后更新状态。

const [activityType, setActivityType] = useState<any>([])
useEffect(() => {
async function fetchData() {
return tabs.map(async (item: any) => {
return await Api.user
.getSettingValues(item.value)
.then((response: any) => {
// console.log(response.settingValue); // true
// console.log(item.value); "ActSendGift"
return setActivityType(response.settingValue);
});
});
fetchData();
}, [activityFeedData.activityList, activityType]);

useState钩子返回两个值，一个是状态变量，另一个是状态更新函数。当状态改变时，组件会自动重新呈现。

Answer 2

尝试将这个数组放入一个状态，并确保usereffect依赖数组中的变量正在被更新，以便执行该块

const tabs = [
{value: 'ActSendGift', label: `${i18n.t('Gifts')}`},
{value: 'ActSubscribe', label: `${i18n.t('Subscribers')}`},
{value: 'ActFollow', label: `${i18n.t('Followers')}`},
];
const [activeType, setActiveType] = useState([])
useEffect(() => {
async function fetchData() {
return tabs.map(async (item: any) => {
return await Api.user
.getSettingValues(item.value)
.then((response: any) => setActiveType(response.settingValue));
});
}
fetchData();
}, [activityFeedData.activityList]);