如何在不触发其 useEffect 的情况下触发状态更新

Question

我正在使用函数组件和钩子。

我有一个钩子，它发送 REST 请求以从应用程序状态的对象获取一组涉及多个参数(例如userId、productId等)的应用程序数据。

此钩子使用如下useEffect()：

useEffect(() => {
fetch()
…
}, [objectInState]); // {user: {id: ‘007’}, product: {id: 008}}

如果任何资源的id发生变化，我想再次发送此请求，因此[objectInState]

---

当我尝试设置基于 URL 的路由时出现问题。

当我根据 URLid设置初始状态时，useEffect钩子会触发并发送一个请求以按预期获取常见应用数据。

问题是，每个负责在 URL 参数中呈现特定资源的组件(用户组件、产品组件等)然后自行发送 REST 请求以获取其资源的详细信息，并将状态中资源的详细信息扩展为类似

// {user: {id: ‘007’, name: ‘John Doe’, email:’’}, product: {id: 008, name: ‘unicorns’, price: ‘1$’}} 

但是，此更改会触发多次获取相同应用程序数据的useEffect。

例如，如果id有实际变化，我确实想获取应用程序数据

{user: {id: ‘007’, name: ‘John Doe’, email:’’}…

更改为

{user: {id: ‘008’, name: ‘John Wick’, email:’’}

但不是什么时候

{user: {id: ‘007’}…由其他组件扩展为{user: {id: ‘007’, name: ‘John Doe’, email:’’}。

当我从组件扩展当前对象的状态时，如果我能告诉 react 不要触发useEffect{silent: true}监听该参数，则可以避免此问题。

在这种情况下，如何使useEffect()不再触发？ 还是有另一种方法可以实现此类功能？

Answer 1

根据你所描述的内容，你应该将对象分成不同的使用状态。

使用类似以下内容：

const [user, setUser] = useState({});
const [product, setProduct] = useState({});
/* one useEffect to get the user */
useEffect(() => {
const user = fetchUser(userIdFromUrl);
setUser(user);
}, [userIdFromUrl]);
/* one useEffect to get the product */
useEffect(() => {
const product = fetchProduct(productIdFromUrl);
setProduct(product);
}, [productIdFromUrl]);

您甚至可以稍后随意将useState和useEffect语句放在自定义钩子中。

注意出于示例目的简化了提取调用

Answer 2

你可以添加像isChangeId这样的状态

const [isChangeId, setIsChangeId] = useState({user: false, product: false});

并像这样添加使用效果：

useEffect(() => {
if (isChangeId.user) {
// Your code
setIsChangeId({ ...isChangeId, user: false});
}
}, [isChangeId, /* other dependency */]);

这就是我的解决方案！