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

Question

我对 React Hooks/上下文很陌生，所以我非常感谢一些帮助。请不要用你锋利的牙齿跳到我身上。我检查了其他解决方案以及我以前做过的一些方法，但似乎无法通过“从列表中选择”的方式在这里获得它。总结我需要在我的搜索中获取我的常量“allMunicipios”（对象数组）内的市政名称列表.js然后显示一张包含所选市政数据的卡片。任务从 eltiempo-net REST API 获取数据。使用弹性 UI 中的组合框异步元素从市政列表中进行选择。显示卡（也来自弹性 UI），其中包含所选市政的一些信息。它必须用功能组件/钩子来完成。无类。我将不胜感激任何帮助。我做了什么我已经在上下文文件夹中创建了我的化简器，上下文和类型文件，以使用这些文件填充所有数据，然后从组件访问数据。我已创建搜索.js文件。然后在“应用.js”中导入“搜索.js”。我已经访问了 REST API，现在在我的搜索中拥有它.js问题不知何故，我无法迭代我得到的数据。基本上我需要推动市政当局。从 api 到数组的 NOMBRE 在我的搜索中组成了所有市政.js组件。但是当我控制台日志它给我未定义。不知道为什么。我将在这里分享相关的代码/组件。非常感谢任何花时间的人。municipiosReducer.jsimport {  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;  }};市政语.jsimport { createContext } from "react";const municipiosContext = createContext();export default municipiosContext;

Answer 1

您正在使用 forEach 并将返回的值分配给变量，但不返回任何内容。您应该改用地图forEach

  let municipiosNames = municipiosFromContext.map((municipio) => {

    return `label: ${municipio.NOMBRE}`;

  });

根据您的评论：

您的数据是异步加载的，因此在首次呈现时将不可用，并且由于功能组件依赖于闭包，因此 onSearchChange 函数在创建时从闭包中获取值，即使您其中有一个 setTimeout，更新的值也不会反映

这里的解决方案是添加为依赖项以使用效果municipiosFromContext

const 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]);