Javascript 如果从服务器接收到钩子的值，那么在哪里更新钩子的值更好？

我有一个useEffect，它从服务器1获取两个值，项目2的价格，项目名称。当我使用setPriceSquanchy函数（obj.price）setNameSquanchy（obj.name）时。我的代码更新了两次，没有办法让它只更新一次

import React, { useState,useEffect} from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [priceSquanchy, setPriceSquanchy] = useState("");
  const [nameSquanchy, setNameSquanchy] = useState("");
  useEffect(() => {
  (async () => {
    const res = await fetch(
      `https://foo0022.firebaseio.com/vz.json`
    );
    const obj = await res.json();
     setPriceSquanchy(obj.price)
     setNameSquanchy(obj.name)
  })();

}, []);
console.log("Hello")
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React，{useState，useffect}来自“React”；
从“react dom”导入react dom；
导入“/styles.css”；
函数App（）{
const[priceSquanchy，setPriceSquanchy]=useState（“”）；
const[namesquancy，setnamesquancy]=useState（“”）；
useffect（（）=>{
（异步（）=>{
const res=等待取数(
`https://foo0022.firebaseio.com/vz.json`
);
const obj=await res.json（）；
setPriceSquanchy（目标价格）
setNameSquanchy（对象名）
})();
}, []);
log（“你好”）
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

useffect

用于治疗副作用

来自React文档

接受包含命令式、可能有效代码的函数。 函数组件的主体（称为React的呈现阶段）中不允许出现突变、订阅、计时器、日志记录和其他副作用。这样做会导致混淆错误和UI中的不一致。 相反，使用useffect。传递给useEffect的函数将在渲染提交到屏幕后运行

现在，您所做的实际上是一个副作用（AJAX调用），下面是一个通过

useffect

实现同样效果的工作

---

请注意，

useffect

使用了第二个参数。这是依赖项数组，

useffect

只会相应地触发。通过提供一个空数组，我确保它只运行一次。如果不这样做，将继续在组件中调用此函数。您还可以根据其他一些状态变量控制它的触发。更多阅读信息。

useffects

是一个很好的地方

useffects

hook用于处理副作用，例如

fetch

request

如果请求应该在组件装载时执行一次，而不是在每次渲染时执行，

useffects

应该与空输入一起使用

函数混合了

async..wait

和以不必要的复杂方式进行承诺

应该是：

useEffect(() => {
  (async () => {
    const res = await fetch(
      `......`
    );
    const obj = await res.json();
    setPriceSquanchy(obj.price)
    setNameSquanchy(obj.name)
  })();

  // return fetch cancellation function
}, []);

TL；博士是固定版本（另一个使用

ReactDOM.unstable\u batchUpdates

的固定版本）

那么，在承诺得到解决后，您的组件将被呈现两次，对吗？类似于在记录“设置状态”后两次记录“应用程序调用”。这是因为首先调用

setA

，然后调用

setB

，两者都会导致渲染

我认为这很好，因为React只会对DOM应用必要的补丁。即使您修复了它，也不会有太大的性能差异

但是如果你想修复它，你可以有一个包含price和name的状态，比如

{price:，name:：}

，这样你只需要调用

setPriceName（{price:newPrice，name:newName}）

。正如您在本演示中看到的，在记录“设置状态”之后，“应用程序已调用”只记录一次

如果您不想这样做，也可以使用

ReactDOM.unstable\u batchedUpdate

like。正如你所看到的，这也是可行的，但它是“不稳定的”。更多关于Dan和in的API的信息

此外，React有时还可以从

setA

和

setB

批量更新，因此只会导致一次渲染。喜欢在这里，它被批处理在一起，因为它没有超时，并且是在第一次渲染之后立即进行的

更多地关注“如果从服务器接收到钩子的值，那么在哪里更新钩子的值更好？”…

你所做的是非常正确的。另一种方法是制作一个容器组件来获取数据，然后使用一个表示组件来实际呈现数据。我真的不喜欢这种方法（Dan现在也不建议xD），这真的是一种过度使用。你可以阅读更多关于这方面的内容

---

PS：如果您想知道为什么在您的示例的固定版本中仍然有两个渲染，那么第一个是初始渲染。因此，在承诺得到解决之后，基本上只有一个更新。

我不明白ajax的副作用是什么，它异步地改变了priceSquanchy名称Quanchy的值？ajax副作用意味着你正在脱离React世界，接触浏览器API（在本例中为fetch）因此发生的更新是一个副作用。我应该演示确切的代码，还是你可以根据示例进行修改？很抱歉回答得太长。举个例子，让我更好地理解你说的话。我将试着用一个例子来解释我需要什么。我需要从服务器获取值，然后删除priceSquanchy、nameSquanchy、shippingScanchy值。较少的据我所知，要靠费奇的帮助是不可能的。从我的1个例子中可以看出。你在中使用了多少次状态函数，然后又更新了很多次代码。现在我的问题是，有没有办法让它只更新一次。我可以展示这样一个例子，其中更新较小，但代码更差。我不喜欢这个决定。也许你知道最好的方法，举个例子吧？我已经在我的答案中以codesandbox链接的形式发布了工作示例。这是一个从服务器获取数据并在钩子中更新数据的实例（useEffect）。这正是你的问题，我相信这篇文章。名称Quanchy不是一个函数。你的意思是setNameSquanchy，不是吗？很抱歉回答得太长了。当你使用异步函数时，eslint发誓。我不记得这和什么有关系，这似乎是个坏主意。它不会伤害任何东西，但这可能会让你失望