React中如何基于另一个state为useState设置初始值？

问题原因 #

你遇到的问题核心在于：

• 组件首次渲染时，productsList是空数组，此时Math.max(...productsList.map(prod => prod.basePrice))会返回-Infinity（因为Math.max未传入有效数值参数），用这个值作为useState的初始值显然不符合预期。
• 更关键的是，useState的初始值只会在组件第一次挂载时计算一次，后续即使productsList通过API更新，这个初始值也不会重新计算，所以滑块的最大值始终停留在初始错误值。

解决方案 #

我们需要在productsList更新后手动同步maxPriceInSlider的状态，同时处理空数组的边界情况：

1. 修复最高价格计算逻辑，避免空数组导致的异常：

const maxPricedProductPrice = productsList.length 
  ? Math.max(...productsList.map((prod) => prod.basePrice)) 
  : 0;

2. 添加监听productsList变化的useEffect，当API数据返回后，自动将滑块最大值设置为产品的最高价格：

useEffect(() => {
  if (productsList.length) {
    const newMaxPrice = Math.max(...productsList.map(prod => prod.basePrice));
    setMaxPriceInSlider(newMaxPrice);
  }
}, [productsList]);

3. 保持maxPriceInSlider初始值为0即可，后续会被useEffect自动更新：

const [maxPriceInSlider, setMaxPriceInSlider] = useState(0);

修改后的完整组件代码 #

import React from "react";
import { useEffect, useState } from "react";

import axios from "axios";
import { ColorRing as Loader } from "react-loader-spinner";
import HeroGeneral from "../components/UI/HeroGeneral";
import BidItem from "../components/General/BidItem";
import "./bidslist.css";

const BidsList = () => {
  const [loading, setLoading] = useState(false);
  const [productsList, setProductsList] = useState([]);

  // 修复空数组情况下的最高价格计算
  const maxPricedProductPrice = productsList.length 
    ? Math.max(...productsList.map((prod) => prod.basePrice)) 
    : 0;

  const [minPriceInSlider, setMinPriceInSlider] = useState(0);
  const [maxPriceInSlider, setMaxPriceInSlider] = useState(0);

  // 监听productsList变化，更新滑块最大值
  useEffect(() => {
    if (productsList.length) {
      const newMaxPrice = Math.max(...productsList.map(prod => prod.basePrice));
      setMaxPriceInSlider(newMaxPrice);
    }
  }, [productsList]);

  const onMinPriceSliderChangeHandler = (e) => {
    setMinPriceInSlider(e.target.value);
  };
  const onMaxPriceSliderChangeHandler = (e) => {
    setMaxPriceInSlider(e.target.value);
  };

  useEffect(() => {
    window.scrollTo(0, 0);
    setLoading(true);
    axios
      .get("http://localhost:5000/api/v1/products")
      .then((data) => {
        setProductsList(data.data.data.products);
        setLoading(false);
      })
      .catch((err) => {
        setLoading(false);
      });
  }, []);

  return (
    <div>
      <HeroGeneral />
      <div className="bidlist_page_content">
        <aside className="filter">
          <h2>Filter by</h2>
          <div className="filterby_cat">
            <h3>Category: </h3>
            <select name="c" id="">
              <option value="Electronics">Electronics</option>
              <option value="Others">Others</option>
            </select>
          </div>
          <div className="filterby_price">
            <h3>
              Start price:{" "}
              <input
                type="range"
                name="minPriceInSlider"
                value={minPriceInSlider}
                min="0"
                max={maxPricedProductPrice}
                onChange={onMinPriceSliderChangeHandler}
              />
              {minPriceInSlider}
            </h3>
            <h3>
              End price:{" "}
              <input
                type="range"
                name="maxPriceInSlider"
                value={maxPriceInSlider}
                min="0"
                max={maxPricedProductPrice}
                onChange={onMaxPriceSliderChangeHandler}
              />
              {maxPriceInSlider}
            </h3>
          </div>
        </aside>
        <div>
          <div className="divlist_grid_main">
            {loading && (
              <Loader
                visible={true}
                height="100"
                width="100"
                ariaLabel="blocks-loading"
                wrapperStyle={{}}
                wrapperClass="blocks-wrapper"
                colors={["#212529"]}
              />
            )}
            {!loading && productsList.length === 0 && "No products found!"}
            {productsList.map((prod) => (
              <BidItem
                key={prod._id}
                description={prod.description}
                category={prod.category}
                name={prod.name}
                closesAt={prod.closesAt}
                imgURL={prod.imageURL}
                prodId={prod._id}
                bPrice={prod.basePrice}
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default BidsList;

额外说明 #

• 修改后，当API数据加载完成，productsList更新时，useEffect会自动触发，计算出最高价格并同步到maxPriceInSlider状态，滑块最大值就能正确显示。
• 空数组的处理确保了没有产品时，滑块不会出现无效的max值。

内容的提问来源于stack exchange，提问作者sethi67