react组件加载5次“未定义”，然后找到内部html div

import React, { useState } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  // ... 其他代码

  return (
    <div>
      {data ? <div>{data}</div> : <div>Loading...</div>}
    </div>
  );
}

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    }

    fetchData();
  }, []);

  return (
    <div>
      {data ? <div>{data}</div> : <div>Loading...</div>}
    </div>
  );
}

import React from 'react';

function MyComponent({ shouldRender }) {
  if (!shouldRender) {
    return null;
  }

  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
}

import React, { Component } from 'react';

class MyComponent extends Component {
  state = {
    data: null,
  };

  componentDidMount() {
    // 异步操作
  }

  render() {
    const { data } = this.state;

    return (
      <div>
        {data ? <div>{data}</div> : <div>Loading...</div>}
      </div>
    );
  }
}

npm install some-dependency

import SomeDependency from 'some-dependency';