Question

我有 2 个功能组件，父组件将状态变量作为道具传递给子组件：

家长：

const Parent = () => {
    const [data,setData] = useState()


    const printSomething = async () =>{
       console.log("Use effect called")
    }

    useEffect(() => {
        printSomething();
    }, []);


    return (
        <Child setData={setData}/>
    );
}

export default Parent

儿童：

const Child = ({setData}) => {

    const doSomething = async () => {
        setData("Data")
    }

   
    return (
    <div className='task-container'>
        <div>
            <button onClick={doSomething}>Click me</button>
        </div>
    </div>
    );
}

export default Child;

我的问题为什么在子组件上使用 setData() 不会触发父组件的 useEffect() 运行？

Answer 1

A useEffect 只会在其依赖数组中的某些内容发生更改时运行其回调。如果依赖数组为空，它只会在挂载时运行。使用：

useEffect(() => {
    printSomething();
}, [data]);

以便它在 data 更改时运行。

UseState 不会触发 useEffect

1 个答案: