反应使用效应不断提取

Question

我正在使用usefect从数据库获取数据，然后代码显示该列表的数据。

  useEffect(() => {
    console.log("triggered")
    fetch("http://localhost:8080/group/getAll")
    .then(response => response.json())
    .then(data => {
      setGroups(data)
    })
  })

我注意到触发在几秒钟内被打印到数千次，因此我假设它不断向DB发送请求。

这是预期的行为吗？如果没有，我该如何修复？

PS我知道[]参数仅渲染一次。但是，是否有一种方法可以使使用效应正确起作用（仅在网页上 groups 重读者时获取数据）

-----编辑------

这就是我使用组

  const createGroup = groups.map((group, i) => {
    return (
      <Dropdown.Item 
        key = {i}
        onClick = {showUser}
        id = {group["groupId"]}
      >
      {group["groupName"]}
      </Dropdown.Item> 
    )
  })

和create> create> create> create> create>

<Dropdown.Menu>
  {createGroup}
</Dropdown.Menu>

----编辑2 ---------- 我了解依赖性阵列的工作方式。我尝试了[groups]，但这没有改变任何东西。我还尝试了[createGroup]，但是出现了一个错误，因为该功能首先未初始化。我可以在依赖项数组中添加HTML元素或其他内容吗？使用我的代码结构，我应该在那里放置什么？

Answer 1

您应该指定状态变量或道具，当更改时应触发使用效率，如以下：

useEffect(() => {
    console.log("triggered")
    fetch("http://localhost:8080/group/getAll")
    .then(response => response.json())
    .then(data => {
      setGroups(data)
    })
  }, [x , y]);

x and y可以是状态变量，Prop，或两者兼有。只有当这些值会改变时，使用效率才会触发。

Answer 2

关于：

我注意到触发的触发器在几秒钟内被打印到数千次，所以我假设它不断将请求发送到DB。

这已经得到了回答，对于您的用例，这不是预期的行为，因为您似乎想从数据库获取数据，

fetch("http://localhost:8080/group/getAll")

收集JSON

.then(response => response.json())

并使用setGroups

.then(data => {
  setGroups(data)
})

也就是说：

在

do 您想要使用 to 工作正确？

根据其代码中的用法，它似乎可以按设计工作。如果要使用useffect触发重新渲染，则要除了groups以外的其他状态变量，正如许多评论员和用户所指出的那样，引起无限循环。

问问自己：您是否希望再次拨打API电话？ （因此，重新渲染）基于group的选择，从＆lt; dropdown＆gt;？

然后，在＆lt; dropdown＆gt;中选择的值需要传递给useffect的依赖项数组

Answer 3

我相信您应该首先了解组件生命周期概念（可能带有类组件），然后了解如何使用钩子和功能组件复制生命周期。

我在这里提供了一个解释，希望这种解释可能会有所帮助。

请比较这三个片段：

摘要＃1：

// This snippet (#1) runs on every render because there is no dependencies.
// So if the component gets updated then it will be re-rendered.
// Consequently, this effect will be fired again (and again if the effect updates the component state).
useEffect(() => {
    // fetch logic [...]
    console.log("runs every time component is re-rendered");
});

摘要＃2：

// This snippet (#2) runs on mount. It's similar to componentDidMount on class components.
// Notice there is an empty array of dependencies as a second argument.
// You can fetch data when page is loaded with this snippet.
useEffect(() => {
    // fetch logic [...]
    console.log("runs only when component was mounted");
}, []);

摘要＃3：

// This snippet (#3) runs when values on dependency array change, like url variable.
// You can select your array of dependencies. Be aware when some dependency gets updated.
useEffect(() => {
    console.log("triggered only when dependencies change")
    fetch(url)
    .then(response => response.json())
    .then(data => {
        setGroups(data)
    })
}, [url]);

祝您有美好的一天！