Question

我正在使用功能组件和挂钩。

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

此钩子使用useEffect()沿以下行：

 useEffect(() => {
   fetch()
   …

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

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

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

当我基于id的URL设置初始状态时，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:’’}被其他组件扩展为useEffect。

当我从组件扩展处于状态的当前对象时，如果我可以说出像不使用{silent: true}那样触发useEffect()来监听该参数的响应，则可以避免此问题。 / p>

在这种情况下如何使{{1}}不再触发？还是有另一种方法来实现这种功能？

Answer 1

根据您的描述，应将对象分为不同的 useStates 。

使用类似的东西：

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 语句随意放入自定义钩子中。

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

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

1 个答案: