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

Question

我正在编写一个计算机比较网站，在为 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 调用没有采用正确的过滤器......

Answer 1

getComputers适用于其他state“实例”/ref`您可以useEffect用作addFilter更改filter：useEffect(() => {&nbsp; getComputers();}, [filter]);onChange={val => addFilter({ name: 'orderby', value: val.value })}addFilter更改filter...filter更改运行效果代码（每次更改时）