javascript - React Hooks - 如何使用使状态依赖于另一个状态？

Question

我最近开始在 react 中使用钩子(Hook)，我经常遇到这个问题:我创建了一个由我的所有组件使用的第一个大状态，但是我的组件的一些较小的部分划分了这个状态，并为简单起见创建了自己的状态。

举个例子

import React, { useState } from "react";

const initialFilters = {
  name: "",
  code: ""
};

function Filter({ value, setFilters }) {
  const [tempValue, setTempValue] = useState(value);

  return (
    <input
      value={tempValue}
      onChange={e => setTempValue(e.target.value)}
      onBlur={() => setFilters(tempValue)}
    />
  );
}

function App() {
  const [filters, setFilters] = useState(initialFilters);
  const agents = [
    { name: "bob", code: "123" },
    { name: "burger", code: "3123" },
    { name: "sponge", code: "34" }
  ];

  return (
    <div>
      <label>Name filter</label>
      <Filter
        value={filters.name}
        setFilters={value =>
          setFilters(filters => ({ ...filters, name: value }))
        }
      />
      <label>Code filter</label>
      <Filter
        value={filters.code}
        setFilters={value =>
          setFilters(filters => ({ ...filters, code: value }))
        }
      />
      <button onClick={() => setFilters(initialFilters)}>Reset filters</button>
      <ul>
        {agents
          .filter(
            agent =>
              agent.name.includes(filters.name) &&
              agent.code.includes(filters.code)
          )
          .map((agent, i) => (
            <li key={i}>
              name: {agent.name} - code: {agent.code}
            </li>
          ))}
      </ul>
    </div>
  );
}

export default App;

CodeSandox 可用 here

在这个例子中，过滤器工作正常，但是当我们使用按钮重置时，它们的值并没有清空。

过滤器创建自己的状态以仅在模糊时分派(dispatch)新状态，并且仍然受到控制。我想我可以在这里使用 ref ，但我使用这个例子来展示一个简单的状态依赖于另一个状态(因此也依赖于 Prop )的例子。

我应该如何以惯用的 React 方式实现这一点？

Answer 1

您可以使用 useEffect钩。第一个参数是一个函数，第二个参数是一个依赖数组。当依赖项改变值时，函数会再次执行。

import { useEffect } from 'react';

// ....code removed....

  useEffect(() => {
    setTempValue(value);
  }, [value]);

// ....code removed....

有变化的沙盒: https://codesandbox.io/s/kind-bogdan-ljugv