简单的React状态在第一次请求时不发生变化

在React中，可以使用useEffect钩子来处理组件的副作用，包括在组件挂载后发送请求。为了确保在第一次请求时不改变React状态，可以使用一个布尔值来判断是否为第一次请求。

下面是一个示例代码：

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

function MyComponent() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const isFirstRequest = useRef(true);

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

        if (isFirstRequest.current) {
          isFirstRequest.current = false; // 将布尔值设为false，表示已经执行过第一次请求
        } else {
          setData(json); // 更新数据
        }
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false); // 请求完成后，将loading状态设为false
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default MyComponent;

在上面的示例中，我们使用了isFirstRequest这个useRef来记录是否为第一次请求。在useEffect中，我们使用fetchData函数来发送请求，如果是第一次请求，我们将布尔值isFirstRequest.current设置为false，表示已经执行过第一次请求；如果不是第一次请求，我们将返回的数据更新到React状态中。

注意，在useEffect的依赖数组中传入一个空数组[]，这样可以确保这个useEffect只在组件挂载时执行一次，而不会在组件更新时重复执行。

这样，当组件首次渲染时，会显示"Loading..."，然后发送请求获取数据，并将数据更新到React状态中。从第二次请求开始，数据才会显示在页面上。