Javascript 我可以在react中使用useffect钩子在parent-from-child中设置状态吗

我在子组件中有一组按钮，单击该按钮时，会设置相应的状态值true或false。我在这个子组件中有一个useEffect钩子，它还依赖于所有这些状态值，所以如果单击一个按钮，这个钩子就会调用setFilter，它会作为一个道具从父组件传递下来

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>
  );
};

constfilter=（{setFilter}）=>{
const[cycling，setCycling]=useState（true）；
const[diy，setDiy]=useState（true）；
useffect（（）=>{
设置过滤器({
骑自行车：骑自行车，
diy：diy
});
}，[骑自行车，自己动手]；
返回(
设置循环（！循环）}>循环
setdIY（！DIY）}>DIY
);
};

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

const ItemDashboard = () => {

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

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

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

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

const ItemDashboard=（）=>{
const[filter，setFilter]=useState（null）；
useffect（（）=>{
console.log（'on mount'）；
}, []);
useffect（（）=>{
console.log（'filter'）；
}，[filter]）；
返回(
..
);
}

是的，您可以，

在子组件中使用effect

，这取决于状态，也是您通常实现受控和非受控组件的方式：

const NOOP = () => {};

// Filter
const Child = ({ onChange = NOOP }) => {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    onChange(counter);
  }, [counter, onChange]);

  const onClick = () => setCounter(c => c + 1);

  return (
    <div>
      <div>{counter}</div>
      <button onClick={onClick}>Increase</button>
    </div>
  );
};

// ItemDashboard
const Parent = () => {
  const [value, setState] = useState(null);

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

  return <Child onChange={setState} />;
};

constnoop=（）=>{}；
//滤器
const Child=（{onChange=NOOP}）=>{
const[counter，setCounter]=useState（0）；
useffect（（）=>{
onChange（计数器）；
}，[counter，onChange]）；
constonclick=（）=>setCounter（c=>c+1）；
返回(
{计数器}
增加
);
};
//项目仪表板
常量父项=（）=>{
常量[值，设置状态]=使用状态（null）；
useffect（（）=>{
console.log（值）；
}，[价值]；
返回；
};

---

我猜，你在寻找成为普通父母的途径

为了做到这一点，您可以将子组件（作为道具传递）的事件处理程序绑定到它们的公共父组件中所需的回调

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

const{render}=ReactDOM，
{useState}=React
康斯特爱好=[“骑自行车”、“DIY”、“徒步旅行”]
常量ChildList=（{list}）=>(

{list.map（（li，key）=>{li}）}

)
常量ChildFilter=（{onFilter，visibleLabels}）=>(
{
嗜好。地图（（嗜好，关键）=>(
{爱好}
onFilter（值，选中）}
/>
))
}
)
常量父项=（）=>{
const[Visible嗜好，SetVisible嗜好]=useState（嗜好），
onChangeVisibility=（爱好，可见）=>{
看得见的
SetVisibleHabiods（VisibleHabiods.filter（h=>h！=Hobiody））：
SetVisible嗜好（[…Visible嗜好，嗜好]）
}
返回(
)
}
渲染(
,
document.getElementById（'root'））
)

---

为什么不控制父组件中的所有状态变量？这里的主要问题是什么？它不是用setFilter方法更新父对象的状态吗？是的，它会更新父对象的状态，但对筛选器状态的影响会在加载时触发两次，在我的代码中，筛选器会两次从数据库加载项。这基本上是我已经拥有的，但感谢您的回答。我想我问的问题不对，所以我会再问一个。