反应挂钩-useEffect方法不断获取

Question

在我的许多组件中，我必须使用存储中的令牌来获取数据并进行表示（页眉菜单，页脚菜单，页面上的产品，滑块图像等）。我试图做的就是仅在没有数据的情况下获取此数据，但是React每次每次令牌更改时都会发送请求（因为令牌是依赖项），即使我清楚地说明了条件并且可以通过控制台查看到。记录它。我究竟做错了什么？

const [cities, setCities] = useState([]);

useEffect(() => {
 if (!cities.length) {
  fetch(`.....&token=${props.token}`)
  .then(response => response.json())
  .then(data => {

    if (data.data.results) {
    setCities(data.data.results.cities)

    }
   })
  }
}, [props.token, cities.length]);

Answer 1

无论如何，第一次渲染时将为cities空，因此您不需要检查其长度并将其指定为依赖项：

const [cities, setCities] = useState([]);

useEffect(() => {
  fetch(`.....&token=${props.token}`)
    .then(response => response.json())
    .then(data => {
      if (data.data.results) {
        setCities(data.data.results.cities)
      }
    })
}, [props.token]);

您还可以记住令牌以防止其触发回调useEffect：

const token = useMemo(() => props.token, []);