javascript - 我可以在 react 中使用 useEffect 钩子(Hook)在父级中设置状态吗

Question

我在子组件中有一组按钮，单击时设置相应的状态值 true 或 false。我在这个子组件中有一个 useEffect 钩子(Hook)，它还依赖于所有这些状态值，所以如果单击一个按钮，这个钩子(Hook)然后调用 setFilter ，它作为来自父级的 Prop 传递下来......

const Filter = ({ setFilter }) => {

  const [cycling, setCycling] = useState(true);
  const [diy, setDiy] = useState(true);

  useEffect(() => {
    setFilter({
      cycling: cycling,
      diy: diy
    });
  }, [cycling, diy]);

  return (
    <Fragment>
      <Row>
        <Col>
          <Button block onClick={() => setCycling(!cycling)}>cycling</Button>
        </Col>
        <Col>
          <Button block onClick={() => setdIY(!DIY)}>DIY</Button>
        </Col>
      </Row>
    </Fragment>
  );
};

在父组件中，我显示了一个项目列表。我在父级中有两种效果，一种是初始加载项目，另一种是在更改过滤器时触发。为了简洁起见，我删除了大部分代码，但我认为我遇到的问题归结为这样一个事实，即在渲染我的 ItemDashboard 时，过滤器被调用了两次。我怎样才能阻止这种情况的发生，或者我应该以另一种方式看待这个问题。

const ItemDashboard = () => {

  const [filter, setFilter] = useState(null);

  useEffect(() => {
    console.log('on mount');
  }, []);

  useEffect(() => {
    console.log('filter');
  }, [filter]);

  return (
    <Container>..
      <Filter setFilter={setFilter} />
    </Container>
  );
}

Answer 1

我猜，你正在寻找通往 lift state up 的路。给共同的 parent 。

为了做到这一点，您可以将子组件的事件处理程序(作为 Prop 传递)绑定(bind)到其共同父级中所需的回调。

以下现场演示演示了该概念:

const { render } = ReactDOM,
      { useState } = React
      
const hobbies = ['cycling', 'DIY', 'hiking'] 

const ChildList = ({list}) => (
  <ul>
    {list.map((li,key) => <li {...{key}}>{li}</li>)}
  </ul>
)
      
const ChildFilter = ({onFilter, visibleLabels}) => (
  <div>
  {
    hobbies.map((hobby,key) => (
      <label {...{key}}>{hobby}
        <input 
          type="checkbox" 
          value={hobby}
          checked={visibleLabels.includes(hobby)}
          onChange={({target:{value,checked}}) => onFilter(value, checked)}
        />
      </label>))
  }
  </div>
)
      
const Parent = () => {
  const [visibleHobbies, setVisibleHobbies] = useState(hobbies),
        onChangeVisibility = (hobby,visible) => {
          !visible ?
          setVisibleHobbies(visibleHobbies.filter(h => h != hobby)) :
          setVisibleHobbies([...visibleHobbies, hobby])       
        }
   return (
      <div>
        <ChildList list={visibleHobbies} />
        <ChildFilter onFilter={onChangeVisibility} visibleLabels={visibleHobbies} />
      </div>
   )
}

render (
  <Parent />,
  document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>