reactjs - 当两件事发生变化时 react 触发 useEffect

Question

我正在尝试使用 react Hook ，并且我想在两件事发生变化时运行一个函数:

const Filter = ({ orderList, orders }) => {
  const [from, setFrom] = useState();
  const [to, setTo] = useState();
  const [filteredList, setFilteredList] = useState(orders);

  useEffect(() => {
    const filteredOrders = orders.filter(function(item) {
      return item.order_number >= from && item.order_number <= to;
    });
    setFilteredList(filteredOrders);
    console.log(filteredList);
  }, [from, to]);

更准确地说，我只想在 BOTH from 时过滤数组和 to状态更改，这是因为我试图从用户定义的某些输入中过滤数组。

我怎样才能做到这一点？

Answer 1

您将无法通过将更多参数传递给 useEffect() 来完成此操作。 , 默认情况下会导致 useEffect()只要更改一项就执行。

但是，您可以结合 useEffect与 useRef来实现这一点。我们将使用 useRef存储状态的先前值并将其与我们的新状态值进行比较。

参见代码框，例如:https://codesandbox.io/s/heuristic-nobel-6ece5

const App = () => {
  const [from, setFrom] = useState();
  const [to, setTo] = useState();

  const previousValues = useRef({ from, to });

  useEffect(() => {
    if (
      previousValues.current.from !== from &&
      previousValues.current.to !== to
    ) {
      //your logic here
      console.log("both changed")
      previousValues.current = { from, to };
    }
  });

  return (
    <div>
      <input
        placeholder="from"
        value={from}
        onChange={e => setFrom(e.target.value)}
      />
      <input
        placeholder="to"
        value={to}
        onChange={e => setTo(e.target.value)}
      />
    </div>
  );
};