Reactjs 如何在不触发状态更新的情况下触发状态更新’；使用效应

我正在使用函数组件和挂钩

我有一个钩子，它发送REST请求，从处于应用程序状态的对象中获取一组涉及多个参数（例如

userId

，

productId

等）的应用程序数据

此钩子使用了一个

useffect（）

，其内容如下：

 useEffect(() => {
   fetch()
   …

}, [objectInState]); // {user: {id: ‘007’}, product: {id: 008}}

如果任何资源的

id

发生更改，我想再次发送此请求，因此

[objectInState]

---

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

当我根据URL中的

id

设置初始状态时，

useffect

钩子将触发并发送一个请求，以按预期获取公共应用程序数据

问题是，负责在URL参数（用户组件、产品组件等）中呈现特定资源的每个组件都会自己发送一个REST请求，以获取其资源的详细信息，并将处于状态的资源的详细信息扩展为

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

但这一更改触发了多次再次获取相同应用程序数据的

useffect

例如，如果

id

中有实际更改，我确实希望获取应用程序数据

{用户：{id:'007'，姓名：'John Doe'，电子邮件：'}…

更改为

{用户：{id:'008'，姓名：'John Wick'，电子邮件：'}

但不是什么时候

{user:{id:'007'}…

被其他组件扩展为

{user:{id:'007'，name:'John Doe'，email:'}

当我从一个组件扩展一个处于状态的当前对象时，如果我能告诉react to not trigger

useffect

，使用类似于

{silent:true}

的东西监听该参数，那么这个问题是可以避免的

在这种情况下，如何使

useffect（）

不再触发？

---

或者有其他方法来实现这种功能吗？

根据您所描述的，您应该将对象划分为不同的使用状态

使用类似于：

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和useffect语句放入自定义挂钩中

---

注意提取调用被简化，例如

有帮助吗？我认为最好是基于

user.id

和

product.id

创建一个新的UUID，并使其成为您的useffect dep如何“扩展”一个对象？假设您正在创建一个全新的对象？如果您保留相同的对象实例，那么它不会重新触发

useffect

@James是的，我正在创建一个新对象，就像典型的状态更新一样，响应太大，无法逐个设置属性…@TJ这就是

useffect

重新运行的原因，它是以编程方式更新对象上的多个属性相当容易，而不必对每个属性进行显式更新，例如“从处于应用程序状态的对象”-我不认为OP使用的是本地状态。@James仍然useEffect的依赖项仍然是url的id。使用useState或顶部节点的另一个应用程序状态是不相关的。将这样一个对象内置到状态本身是不好的。我的观点是，你在这里复制状态管理，例如，如果这是一个类组件，你会吗将用户数据存储在

this.state

中如果它已经通过

props

传入，则可能不会，您的解决方案在组件中不使用

useState

的情况下仍然可以工作，即

useffect（（）=>…，[objectInState.user.id]）

@James我一开始以为他在同一个文件中有它。如果OP澄清了，我将更新我的答案，而不引用useState。因为当时状态不起作用。如果他根据url中的id获取数据，依赖关系将始终称为param。