程序员经验分享-hwhale

React hooks setState 落后一步

2024-03-31

我有这个复选框输入，当我点击它时，我获取它的值并添加到名为供应商过滤器的状态数组中，但似乎状态总是落后一步，我正在使用类组件，我认为切换到钩子可能会解决问题，但它确实做到了不是。

我已附上codesandbox链接，请查看。

https://codesandbox.io/s/naughty-brattain-89hxi?file=/src/App.js https://codesandbox.io/s/naughty-brattain-89hxi?file=/src/App.js

import React, { useState, useEffect } from "react";
import "./styles.css";
import raw from "./data.json";

const App = () => {
  const [data, setData] = useState([]);
  const [vendorFilters, setVendorFilters] = useState([]);
  const [capacityFilters, setCapacityFilters] = useState([]);
  const [speedFilters, setSpeedFilters] = useState([]);
  const [cycleLatencyFilters, setCycleLatencyFilters] = useState([]);
  const [colorFilters, setColorFilters] = useState([]);
  const [vendorQuantity, setVendorQuantity] = useState([0, 0, 0, 0, 0, 0]);

  useEffect(() => setData(raw), []);

  const inputHandler = event => {
    updateFiltersArrays(
      event.target.value,
      event.target.name,
      event.target.checked
    );
    console.log(vendorFilters);
    filterFunction();
  };

  const filterFunction = () => {
    const filteredData1 = data.filter(object => {
      if (vendorFilters.length === 0) return true;
      return vendorFilters.includes(object.vendor);
    });
    const filteredData2 = filteredData1.filter(({ capacity }) => {
      if (capacityFilters.length === 0) return true;
      return capacityFilters.includes(capacity.toString());
    });
    const filteredData3 = filteredData2.filter(({ speed }) => {
      if (speedFilters.length === 0) return true;
      return speedFilters.includes(speed.toString());
    });
    const filteredData4 = filteredData3.filter(({ cycleLatency }) => {
      if (cycleLatencyFilters.length === 0) return true;
      return cycleLatencyFilters.includes(cycleLatency.toString());
    });
    const filteredData5 = filteredData4.filter(({ color }) => {
      if (colorFilters.length === 0) return true;
      return colorFilters.includes(color.toString());
    });
    console.log("hikhan");
    const vendor = [0, 0, 0, 0, 0, 0];
    vendor[0] = filteredData5.filter(
      object => object.vendor === "BESTRAM" && vendorFilters.includes("BESTRAM")
    ).length;
  };

  const updateFiltersArrays = (input, collection, checked) => {
    switch (collection) {
      case "vendor":
        if (checked) {
          setVendorFilters([...vendorFilters, input]);
        } else {
          const filters = vendorFilters.filter(f => f !== input);
          setVendorFilters(filters);
        }

        break;
      case "capacity":
        if (checked) {
          setCapacityFilters(prev => [...prev, input]);
        } else {
          const filters = vendorFilters.filter(f => f !== input);
          setCapacityFilters(filters);
        }

        break;
      case "speed":
        if (checked) {
          setSpeedFilters(prev => [...prev, input]);
        } else {
          const filters = vendorFilters.filter(f => f !== input);
          setSpeedFilters(filters);
        }

        break;
      case "cycleLatency":
        if (checked) {
          setCycleLatencyFilters(prev => [...prev, input]);
        } else {
          const filters = vendorFilters.filter(f => f !== input);
          setCycleLatencyFilters(filters);
        }

        break;
      case "color":
        if (checked) {
          setColorFilters(prev => [...prev, input]);
        } else {
          const filters = vendorFilters.filter(f => f !== input);
          setColorFilters(filters);
        }

        break;
      default:
        break;
    }
  };

  return (
    <div class="main-content">
      <h1>Filter Predictions</h1>
      <div class="filter">
        <div class="group" data-test="vendor-group">
          <div class="group__name">vendor</div>
          <label class="group__item" data-test="item-BESTRAM">
            <input
              type="checkbox"
              value="BESTRAM"
              name="vendor"
              onClick={inputHandler}
            />
            BESTRAM ({vendorQuantity[0]})
          </label>
          <label class="group__item" data-test="item-Rocket">
            <input
              type="checkbox"
              value="Rocket"
              name="vendor"
              onClick={inputHandler}
            />
            Rocket ()
          </label>
          <label class="group__item" data-test="item-gTech">
            <input
              type="checkbox"
              value="gTech"
              name="vendor"
              onClick={inputHandler}
            />
            gTech ({vendorQuantity[2]})
          </label>
          <label class="group__item" data-test="item-5Byte">
            <input
              type="checkbox"
              value="5Byte"
              name="vendor"
              onClick={inputHandler}
            />
            5Byte ({vendorQuantity[3]})
          </label>
          <label class="group__item" data-test="item-Xdata">
            <input
              type="checkbox"
              value="Xdata"
              name="vendor"
              onClick={inputHandler}
            />
            Xdata ({vendorQuantity[4]})
          </label>
          <label class="group__item" data-test="item-Abc">
            <input
              type="checkbox"
              value="Abc"
              name="vendor"
              onClick={inputHandler}
            />
            Abc ({vendorQuantity[5]})
          </label>
        </div>
        <div class="group" data-test="capacity-group">
          <div class="group__name">capacity</div>
          <label class="group__item" data-test="item-4">
            <input
              type="checkbox"
              value={4}
              name="capacity"
              onClick={inputHandler}
            />
            4 GB ()
          </label>
          <label class="group__item" data-test="item-8">
            <input
              type="checkbox"
              value={8}
              name="capacity"
              onClick={inputHandler}
            />
            8 GB ()
          </label>
          <label class="group__item" data-test="item-32">
            <input
              type="checkbox"
              value={32}
              name="capacity"
              onClick={inputHandler}
            />
            32 GB ()
          </label>
          <label class="group__item" data-test="item-16">
            <input
              type="checkbox"
              value={16}
              name="capacity"
              onClick={inputHandler}
            />
            16 GB ()
          </label>
        </div>
        <div class="group" data-test="speed-group">
          <div class="group__name">speed</div>
          <label class="group__item" data-test="item-2400">
            <input
              type="checkbox"
              value={2400}
              name="speed"
              onClick={inputHandler}
            />
            2400 MHz (80)
          </label>
          <label class="group__item" data-test="item-2666">
            <input
              type="checkbox"
              value={2666}
              name="speed"
              onClick={inputHandler}
            />
            2666 MHz (30)
          </label>
          <label class="group__item" data-test="item-3333">
            <input
              type="checkbox"
              value={3333}
              name="speed"
              onClick={inputHandler}
            />
            3333 MHz (25)
          </label>
          <label class="group__item" data-test="item-3200">
            <input
              type="checkbox"
              value={3200}
              name="speed"
              onClick={inputHandler}
            />
            3200 MHz (23)
          </label>
          <label class="group__item" data-test="item-3600">
            <input
              type="checkbox"
              value={3600}
              name="speed"
              onClick={inputHandler}
            />
            3600 MHz (21)
          </label>
          <label class="group__item" data-test="item-4000">
            <input
              type="checkbox"
              value={4000}
              name="speed"
              onClick={inputHandler}
            />
            4000 MHz (21)
          </label>
        </div>
        <div class="group" data-test="cycle-latency-group">
          <div class="group__name">cycle latency</div>
          <label class="group__item" data-test="item-CL-7">
            <input
              type="checkbox"
              value={"CL 7"}
              name="cycleLatency"
              onClick={inputHandler}
            />
            CL 7 (54)
          </label>
          <label class="group__item" data-test="item-CL-9">
            <input
              type="checkbox"
              value={"CL 9"}
              name="cycleLatency"
              onClick={inputHandler}
            />
            CL 9 (51)
          </label>
          <label class="group__item" data-test="item-CL-12">
            <input
              type="checkbox"
              value={"CL 12"}
              name="cycleLatency"
              onClick={inputHandler}
            />
            CL 12 (51)
          </label>
          <label class="group__item" data-test="item-CL-11">
            <input
              type="checkbox"
              value={"CL 11"}
              name="cycleLatency"
              onClick={inputHandler}
            />
            CL 11 (44)
          </label>
        </div>
        <div class="group" data-test="color-group">
          <div class="group__name">color</div>
          <label class="group__item" data-test="item-Green">
            <input
              type="checkbox"
              value={"Green"}
              name="color"
              onClick={inputHandler}
            />
            Green (94)
          </label>
          <label class="group__item" data-test="item-Black">
            <input
              type="checkbox"
              value={"Black"}
              name="color"
              onClick={inputHandler}
            />
            Black (50)
          </label>
          <label class="group__item" data-test="item-Red">
            <input
              type="checkbox"
              value={"Red"}
              name="color"
              onClick={inputHandler}
            />
            Red (31)
          </label>
          <label class="group__item" data-test="item-White">
            <input
              type="checkbox"
              value={"White"}
              name="color"
              onClick={inputHandler}
            />
            White (25)
          </label>
        </div>
      </div>
    </div>
  );
};

export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

setState 是一个异步函数，因此数组的值可能尚未更新。它将在下一个渲染周期中具有更新的值。

解决方案是使用useEffect反应钩子

 const inputHandler = event => {
    updateFiltersArrays(
      event.target.value,
      event.target.name,
      event.target.checked
    );
    // remove function call from here
  };

const filterFunction = useCallback(()=>{
  // rest of the code
},[])

useEffect(()=>{
  console.log(vendorFilters); // will have updated value
  filterFunction()
},[vendorFilters,filterFunction])

上面的代码表明，每当vendorFilter更改，运行此函数

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

ReactJS

reactHooks

React hooks setState 落后一步 的相关文章

随机推荐

热门标签