多次调用 React 函数

Question

我想了解为什么我的函数被调用了 5 次。函数 return 前 3 次什么都没有，然后两次都没有数据。当数据准备好时，我希望它只运行一次。

父组件：

export default function PublicCircles() {

  const [circles, getCircles] = useState('');
  const accessToken = window.localStorage.getItem('accessToken')

  useEffect(() => {
    getPublicCircles();
  }, []);

  const getPublicCircles = () => {
    const headers = {
      'Content-Type': 'application/json',
      'Accept-Language': 'fr',
      'Authorization': `Bearer ${accessToken}`,
    }
     axios.get('https://myurl.com/api/get-public-circles?lang=All', { headers })
      .then((response) => {
          const publicCircles = response.data.data;
          getCircles(publicCircles);
        }) 
      .catch(error => console.log('error', error))
  };

  return (
      <PublicCircle circles={circles} />
  )
}

子组件：

export default function PublicCircle(props) {
  console.log(props.circles)
  return(
    <>
    </>
  )
}

结果：

谢谢。

Answer 1

I would like it to run only only once, when the data are ready.

所以您根本不希望 <PublicCircle> 组件在您发送的 prop 有数据之前呈现？在这种情况下，您应该有条件地渲染它。目前你一直在渲染它：

return (
  <PublicCircle circles={circles} />
);

但是你可以简单地在里面引入一个条件。 circles 的默认值是一个空字符串：

const [circles, getCircles] = useState('');

所以检查条件。例如：

return (
  circles === '' ? null :
  <PublicCircle circles={circles} />
);

然后 PublicCircles 组件将默认不呈现任何内容 (null)，并在 circles 包含数据时呈现 <PublicCircle> 元素。

请注意，出于多种原因，您的组件 可能仍 re-render。此处或层次结构上方任何位置的任何状态更改都可以触发 re-render.

多次调用 React 函数

React function called multiple time

reactjs

axios

use-effect