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

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

React Context with Hooks 總是“落后一步”

React Context with Hooks 總是“落后一步”

鴻蒙傳說 2022-06-05 16:31:54
我正在編寫一個計算機比較網站,在為 API 調用設置過濾器時遇到了問題。添加過濾器時,它似乎總是“落后一步”。例如,我為“orderby”添加過濾器,然后調用getComputers(),它使用過濾器作為參數從我們的 api 獲取 pc,但它不應用任何參數,因為過濾器仍然是空的。如果我為“orderby”使用不同的值再次執行此操作,它會將之前的值作為 api 調用的參數。我不明白為什么它會這樣工作,并且非常感謝任何幫助:)是的,我之前對此進行過研究,但似乎沒有什么對我有用......這是我的代碼:搜索結果頁面:import React from 'react';import { useContext } from 'react';import SearchContext from '../../context/search/SearchContext';import Navbar from '../layout/Navbar';import Computers from '../computer/Computers';import Select from 'react-select';const SearchResults = () => {  const searchContext = useContext(SearchContext);  const { filters, orders, getComputers, addFilter } = searchContext;  return (    <>      <Navbar activeItem='Search'></Navbar>      <div className='container my-3 text-dark'>        <div className='row'>          <div className='col-lg-9 col-md-6'>            <h1 className='display-3 mt-3'>Suche</h1>          </div>          <div className='col-lg-3 col-md-6'>            <Select              placeholder='Sortierung'              options={orders.map(order => {                return { value: order.value, label: order.trans };              })}              onChange={val => {                addFilter({ name: 'orderby', value: val.value });                getComputers();              }}            />          </div>        </div>        <div className='my-3'>          {filters.map((filter, index) => {            var text = filter.value.toString();            return (              <span                className='badge badge-pill badge-secondary mx-1 p-2'                key={index}              >                {text.charAt(0).toUpperCase() + text.slice(1)}              </span>            );          })}        </div>        <Computers></Computers>      </div>    </>  );};export default SearchResults;奇怪的是,我的頁面在小藥丸中正確顯示了當前的“orderby”過濾器(見第 42 行)。但是 API 調用沒有采用正確的過濾器......
查看完整描述

1 回答

?
泛舟湖上清波郎朗

TA貢獻1818條經驗 獲得超3個贊

getComputers適用于其他state“實例”/ref`


您可以useEffect用作addFilter更改filter:


useEffect(() => {

  getComputers();

}, [filter]);


onChange={val => addFilter({ name: 'orderby', value: val.value })}

addFilter更改filter...filter更改運行效果代碼(每次更改時)


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

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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