亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

響應鉤子/上下文和彈性 UI。函數組件中的提取數據 (REST) 問題

響應鉤子/上下文和彈性 UI。函數組件中的提取數據 (REST) 問題

米脂 2022-09-16 21:05:43
我對 React Hooks/上下文很陌生,所以我非常感謝一些幫助。請不要用你鋒利的牙齒跳到我身上。我檢查了其他解決方案以及我以前做過的一些方法,但似乎無法通過“從列表中選擇”的方式在這里獲得它??偨Y我需要在我的搜索中獲取我的常量“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;
查看完整描述

1 回答

?
繁星coding

TA貢獻1797條經驗 獲得超4個贊

您正在使用 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]);


查看完整回答
反對 回復 2022-09-16
  • 1 回答
  • 0 關注
  • 107 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號