Javascript React-延迟向useEffect内的useState添加新参数

在我的一个项目上工作时遇到了一个问题。所以我在我的产品中添加了“排序”。例如，您可以根据颜色、品牌、尺寸等对“连帽衫”进行分类。幸运的是，我使用的API接受这些值，例如：

brand:

或

base\u color:

到目前为止，我已经成功地获得了API的键和值，但它的行为有点奇怪

每当我对产品进行分类时，它不会立即适用。举个例子，如果我想把“品牌”分类为“自行车”，什么都不会发生。但如果我尝试将“颜色”排序为“黑色”。然后品牌会改变，但颜色不会改变。所以它被“延迟”了一个

通过我对这个问题的调试，我80%确信我的

useffect

就是这里的小偷

下面是一幅可能会有所帮助的图片：

如您所见，

attribute_1046

的键和值被发送到我的API fetch js文件中，但没有添加到参数中。但每当我改变品牌时（也就是说，我有两个分类）。然后将

属性_1046

添加到参数中

以下是我的API获取代码：

  // Receiving the Key and Value when a user interacts with the "sorting" dropdowns.
  let facetValue = props.facetValue;
  let facetKey = props.facetKey;

  // Setting initial parameters
  const [params, setParams] = useState({
    store: "US",
    offset: props.offset,
    categoryId: props.categoryId,
    limit: props.limit,
    country: "US",
    sort: "freshness",
    currency: "USD",
    sizeSchema: "US",
    lang: "en-US",
  });

  useEffect(() => {
    // if FacetKey is not undefined.
    if (facetKey) {
      console.log(`${facetKey}: ${facetValue}`);
      setParams({
        [facetKey]: facetValue,
        ...params,
      });
    }
    console.log(params);

    const options = {
      method: "GET",
      url: "https://asos2.p.rapidapi.com/products/v2/list",
      params: params,
      headers: {
        "x-rapidapi-key": "",
        "x-rapidapi-host": "",
      },
    };
    axios
      .request(options)
      .then(function (response) {
        setProducts(response.data.products);
        props.items(response.data.itemCount);
        props.facets(response.data.facets);
      })
      .catch(function (error) {
        console.error(error);
      });
    // Is it my dependencies that are incorrect?
  }, [props.limit, facetKey]);

不确定是否也需要此文件，但此处用户对产品进行排序：

  const [facets, setFacets] = useState();
  const [facetValue, setFacetValue] = useState();
  const [facetKey, setFacetKey] = useState();

        <BottomBar>
          <div className={classes.filter_grid_container}>
            {facets != null
              ? facets.map((filter) => (
                  <div className={classes.item}>
                    {filter.name != "Price Range" ? (
                      <Dropdown
                        name={filter.name}
                        values={filter.facetValues}
                        facetKey={filter.id}
                        facetValue={(facetValue) => setFacetValue(facetValue)}
                        facetItemKey={(facetKey) => setFacetKey(facetKey)}
                      />
                    ) : (
                      <DropdownPrice />
                    )}
                  </div>
                ))
              : null}
          </div>
        </BottomBar>
      </StyledApp>
      <div className={classes.grid_container}>
        <FetchAPI
          limit={limit}
          offset={offset}
          items={(itemCount) => setItemCount(itemCount)}
          categoryId={params.id}
          facets={(facets) => setFacets(facets)}
          facetValue={facetValue}
          facetKey={facetKey}
        />
      </div>

const[facets，setFacets]=useState（）；
const[facetValue，setFacetValue]=useState（）；
const[facetKey，setFacetKey]=useState（）；
{facets！=null
？facets.map（（过滤器）=>(
{filter.name！=“价格范围”(
setFacetValue（facetValue）}
facetItemKey={（facetKey）=>setFacetKey（facetKey）}
/>
) : (
)}
))
：null}
setItemCount（itemCount）}
categoryId={params.id}
facets={（facets）=>setFacets（facets）}
facetValue={facetValue}
facetKey={facetKey}
/>

实际问题是

useState返回的函数是异步的，您正在更新useffect中的
params
，并立即访问它以传入axios api的请求

问题：-

if（facetKey）{
log（`${facetKey}:${facetValue}`）；
设置参数({
[facetKey]：facetValue，//在此处更新参数
…参数，
});
}
控制台日志（params）；
常量选项={
方法：“获取”，
url:“https://asos2.p.rapidapi.com/products/v2/list",
params:params，//在这里使用它，因此它将始终返回上一个值
标题：{
“x-rapidapi-key”：“，
“x-rapidapi-host”：“，
},
};

解决方案：-

let requestParam={}；
如果（facetKey）{
requestParam={[facetKey]：facetValue，…params}//使用预期值创建常量
setParams（{…requestParam}）；
}
常量选项={
方法：“获取”，
url:“https://asos2.p.rapidapi.com/products/v2/list",
params:requestParam，//在选项中传递新常量
标题：{
“x-rapidapi-key”：“，
“x-rapidapi-host”：“，
},
};
实际问题是
useState返回的函数是异步的，您正在更新useffect中的
params
，并立即访问它以传入axios api的请求

问题：-

if（facetKey）{
log（`${facetKey}:${facetValue}`）；
设置参数({
[facetKey]：facetValue，//在此处更新参数
…参数，
});
}
控制台日志（params）；
常量选项={
方法：“获取”，
url:“https://asos2.p.rapidapi.com/products/v2/list",
params:params，//在这里使用它，因此它将始终返回上一个值
标题：{
“x-rapidapi-key”：“，
“x-rapidapi-host”：“，
},
};

解决方案：-

let requestParam={}；
如果（facetKey）{
requestParam={[facetKey]：facetValue，…params}//使用预期值创建常量
setParams（{…requestParam}）；
}
常量选项={
方法：“获取”，
url:“https://asos2.p.rapidapi.com/products/v2/list",
params:requestParam，//在选项中传递新常量
标题：{
“x-rapidapi-key”：“，
“x-rapidapi-host”：“，
},
};
问题的出现是因为在
useffect
中，无论何时调用
setParams
，它都不会在同步模式下发生
setParams
本质上是异步的，所以如果您想在
params
上更改时调用
api
，您可以执行以下操作

另外，作为一项建议，如果您可以检查调用
setParams
的方式，这种方式不太容易出错，因为它不会批量更新。当下一个状态依赖于上一个状态时，通常最好使用
setState
的功能约定


//当用户与“排序”下拉列表交互时接收键和值。
const facetValue=props.facetValue；
const facetKey=props.facetKey；
//设置初始参数
const[params，setParams]=useState({
商店：“美国”，
偏置：道具偏置，
categoryId:props.categoryId，
极限：道具极限，
国家：“美国”，
排序：“新鲜度”，
货币：“美元”，
sizeSchema：“美国”，
朗：“恩，我们”，
});
useffect（（）=>{
//如果FacetKey不是未定义的。
如果（facetKey）{
log（`${facetKey}:${facetValue}`）；
setParams（（currParams）=>{…currParams[facetKey]：facetValue}）；
}
//是我的依赖项不正确吗？
}，[props.limit，facetKey]）；
useffect（（）=>{
//您可以将api调用移动到接受参数的函数本身
常量选项={
方法：“获取”，
url:“https://asos2.p.rapidapi.com/