Reactjs 仅当状态随react更改时更新数据

我有一个

User

组件，我想调用api来更新

inactive

状态

我遇到的问题是当组件接收到

props

时调用

useffect

。这意味着它将在组件第一次呈现时进行调用。什么样的模式可以避免这种情况，并且只在

inactive

状态发生变化时才进行调用

我最初的尝试是从依赖项数组中删除用户。但是我需要获取

user.id

以将其传递给服务

如何避免打这些不必要的电话

const User = (props) => {

    const { user } = props
    const [inactive, setInactive] = useState(user.inactive);

    useEffect(() => {

        const abortController = new AbortController();
        const data = { inactive: Number(inactive) }

        updateUserRecordInDatabase(user.id, data);

        return () => {
            abortController.abort();
        };

    }, [inactive, user])

    return (
        <button onClick={ () => setInactive(!inactive) } />toggle { user.name } state</button>
    )
}

const User=（道具）=>{
const{user}=props
const[inactive，setInactive]=useState（user.inactive）；
useffect（（）=>{
const abortController=新的abortController（）；
常量数据={inactive:Number（inactive）}
updateUserRecordInDatabase（user.id，数据）；
return（）=>{
abortController.abort（）；
};
}，[非活动，用户]）
返回(
setInactive（！inactive）}/>切换{user.name}状态
)
}

您可以尝试：

const User = (props) => {

    const { user } = props
    const [inactive, setInactive] = useState(user.inactive);
    const [numUpdate, setNumUpdate] = useState(0);
    const {id} = user //You get id of use here
    useEffect(() => {
        if(numUpdate === 0){
          // This is first time of useEffect
          setNumUpdate(numUpdate + 1); // Only update when first time of useEffect
        }
        const abortController = new AbortController();
        const data = { inactive: Number(inactive) }

        updateUserRecordInDatabase(id, data);

        return () => {
            abortController.abort();
        };

    }, [inactive, id])

    return (
        <button onClick={ () => setInactive(!inactive) } />toggle { user.name } state</button>
    )
}

const User=（道具）=>{
const{user}=props
const[inactive，setInactive]=useState（user.inactive）；
const[numUpdate，setNumUpdate]=useState（0）；
const{id}=user//您可以在这里获得使用id
useffect（（）=>{
如果（numUpdate==0）{
//这是第一次使用效果
setNumUpdate（numUpdate+1）；//仅在首次使用效果时更新
}
const abortController=新的abortController（）；
常量数据={inactive:Number（inactive）}
updateUserRecordInDatabase（id，数据）；
return（）=>{
abortController.abort（）；
};
}，[inactive，id]）
返回(
setInactive（！inactive）}/>切换{user.name}状态
)
}