响应钩子/上下文和弹性 UI。函数组件中的提取数据 （REST） 问题

Question

我对 React Hooks/上下文很陌生，所以我非常感谢一些帮助。请不要用你锋利的牙齿跳到我身上。我检查了其他解决方案以及我以前做过的一些方法，但似乎无法通过“从列表中选择”的方式在这里获得它。

总结

我需要在我的搜索中获取我的常量“allMunicipios”（对象数组）内的市政名称列表.js然后显示一张包含所选市政数据的卡片。

任务

从 eltiempo-net REST API 获取数据。使用弹性 UI 中的组合框异步元素从市政列表中进行选择。显示卡（也来自弹性 UI），其中包含所选市政的一些信息。

它必须用功能组件/钩子来完成。无类。我将不胜感激任何帮助。

我做了什么

我已经在上下文文件夹中创建了我的化简器，上下文和类型文件，以使用这些文件填充所有数据，然后从组件访问数据。我已创建搜索.js文件。然后在“应用.js”中导入“搜索.js”。我已经访问了 REST API，现在在我的搜索中拥有它.js

问题

不知何故，我无法迭代我得到的数据。基本上我需要推动市政当局。从 api 到数组的 NOMBRE 在我的搜索中组成了所有市政.js组件。但是当我控制台日志它给我未定义。不知道为什么。

我将在这里分享相关的代码/组件。非常感谢任何花时间的人。

municipiosReducer.js

import {

  SEARCH_MUNICIPIOS,

  CLEAR_MUNICIPIOS,

  GET_MUNICIPIO,

  GET_WEATHER,

} from "./types";

export default (state, action) => {

  switch (action.type) {

    case SEARCH_MUNICIPIOS:

      return {

        ...state,

        municipios: action.payload,

      };

    case GET_MUNICIPIO:

      return {

        ...state,

        municipio: action.payload,

      };

    case CLEAR_MUNICIPIOS:

      return {

        ...state,

        municipios: [],

      };

    case GET_WEATHER: {

      return {

        ...state,

        weather: action.payload,

      };

    }

    default:

      return state;

  }

};

市政语.js

import { createContext } from "react";

const municipiosContext = createContext();

export default municipiosContext;

Answer 1

您正在使用 forEach 并将返回的值分配给变量，但不返回任何内容。您应该改用地图forEach  let municipiosNames = municipiosFromContext.map((municipio) => {    return `label: ${municipio.NOMBRE}`;  });根据您的评论：您的数据是异步加载的，因此在首次呈现时将不可用，并且由于功能组件依赖于闭包，因此 onSearchChange 函数在创建时从闭包中获取值，即使您其中有一个 setTimeout，更新的值也不会反映这里的解决方案是添加为依赖项以使用效果municipiosFromContextconst onSearchChange = useCallback((searchValue) => {    setLoading(true);    setOptions([]);    clearTimeout(searchTimeout);    // eslint-disable-next-line react-hooks/exhaustive-deps    searchTimeout = setTimeout(() => {      // Simulate a remotely-executed search.      setLoading(false);      setOptions(        municipiosNames.filter((option) =>          option.label.toLowerCase().includes(searchValue.toLowerCase())        )      );    }, 1200);  }, [municipiosFromContext]);  useEffect(() => {    // Simulate initial load.    onSearchChange("");  }, [onSearchChange]);