API 仅在 React 中第一次加载时调用不起作用

Question

我有一个页面需要 API 来获取放映时间。一开始，它会调用 API，但之后就不会再调用了。以下是我调用 API.

的代码

GetShowtimes 是我的 API 电话

const [showData, setShowData] = React.useState([]);

React.useEffect(() => {
  let mounted = true;
  GetShowtimes()
  .then(data =>{
    if(mounted){
      setShowData(data)
    }
})    
  return () => {
    mounted = false
  }
}, [])

const showtimeData = showData.data.showtimeDetails
console.log(showtimeData)

Answer 1

这是合理的，它只会在组件挂载后调用，如果想连续调用可以去掉useEffect第二个参数中的[]，或者添加一个依赖，在依赖变化后再次调用API

并小心使用 'showData.data.showtimeDetails' 因为你第一次记录它没有数据部分或 showtimeDetails 你可以简单地添加'？在每个点之前说它是否存在像这样的东西：showData?.data?.showtimeDetails 希望有用

Answer 2

根据定义使用 Effect（没有任何依赖项）只会运行当组件被安装时。不建议在 useEffect 调用中不提供空数组作为依赖项。这将不必要地消耗 API 资源，通常是一种不好的做法。

如果你只是想连续调用API（同样，不推荐）你可以使用超时功能并直接调用useEffect中的服务。

const [showData, setShowData] = React.useState([]);

React.useEffect(() => {
  let mounted = true;
  
  const timerId = setInterval(() => {
     GetShowtimes()
        .then(data =>{
        if(mounted){
          setShowData(prevData => prevData.concat(data)
        }
  }, 5000); // will run after every 5 seconds


})    
  return () => {
    clearInterval(timerId); // don't forget to clear the interval
    mounted = false
  }
}, [])

const showtimeData = showData.data.showtimeDetails
console.log(showtimeData)

此外，您应该阅读一些关于分页的概念，并尝试查看它是否适用于您的用例。使用分页，您只需在需要更多数据时调用 API。

干杯！

Answer 3

您当前拥有的代码只会在安装组件时触发一次。（卸载时运行清理功能）。如果您想在每次组件重新呈现时都调用 api，请删除空的 [] 作为第二个参数。

React.useEffect(() => {
  let mounted = true;
  GetShowtimes()
  .then(data =>{
    if(mounted){
      setShowData(data)
    }
})    
  return () => {
    mounted = false
  }
})

如果您希望它仅在特定状态（比如说 trigger）发生变化时触发，请将其添加到数组中

   const trigger, setTrigger = useState(); 
   React.useEffect(() => {
          let mounted = true;
          GetShowtimes()
          .then(data =>{
            if(mounted){
              setShowData(data)
            }
        })    
          return () => {
            mounted = false
          }
        }, [trigger])

这将运行这个 useEffect 挂载并且每次 trigger 状态 changes.Change trigger 的值变为运行 api每当你需要的时候。如果有帮助请告诉我

API 仅在 React 中第一次加载时调用不起作用

API call will not work only first time loading in React

reactjs