React中useState异步数据异常及渲染优化问题求助

1. 初始状态类型不匹配：你将configuration的初始值设为数组[]，但接口返回的是对象，首次渲染时configuration.ownermail必然取不到值——数组没有ownermail属性。
2. useState初始值仅生效一次：toggleState的初始值只会在组件首次渲染时计算，后续configuration更新后，不会自动同步到toggleState，所以它始终是undefined。
3. 异步加载时序问题：axios请求是异步操作，组件会先以初始状态渲染，等请求完成更新状态后才触发二次渲染，导致页面先空白再显示数据。

1. 修正初始状态类型 #

将configuration的初始值改为空对象，和接口返回格式保持一致：

const [configuration, setConfiguration] = useState({}); // 替换原有的[]

2. 同步toggleState到configuration的变化 #

使用useEffect监听configuration的变化，当ownermail存在时更新toggleState：

const [toggleState, setToggleState] = useState(''); // 初始值设为空字符串或合理默认值

useEffect(() => {
  // 仅当ownermail存在时更新toggleState
  if (configuration.ownermail) {
    setToggleState(configuration.ownermail);
  }
}, [configuration]); // 依赖configuration，状态变化时触发

3. 优化渲染体验（解决延迟空白问题） #

添加加载状态，在请求完成前显示加载提示，避免页面空白：

const [isLoading, setIsLoading] = useState(true);

function getMailinfo() {
  axios
    .get(`${appLocalizer.apiUrl}/wcs/v1/wcs_mail_active`, {
      headers: {
        "content-type": "application/json",
        "X-WP-NONCE": appLocalizer.nonce,
      },
    })
    .then(response => {
      setConfiguration(response.data);
      setIsLoading(false);
    })
    .catch(err => {
      console.error('邮件配置请求失败:', err);
      setIsLoading(false);
    });
}

渲染时处理加载状态：

return (
  <>
    {isLoading ? (
      <div>加载中...</div>
    ) : (
      <>
        <div>Documentation from react:- {configuration.ownermail}</div>
        <div>Second run:- {toggleState}</div>
      </>
    )}
  </>
);

4. 可选：移除冗余状态 #

如果toggleState只是用来展示configuration.ownermail，完全不需要额外维护这个状态，直接使用原数据即可，减少状态复杂度：

// 移除toggleState相关代码
return (
  <>
    {isLoading ? (
      <div>加载中...</div>
    ) : (
      <>
        <div>Documentation from react:- {configuration.ownermail}</div>
        <div>Second run:- {configuration.ownermail}</div>
      </>
    )}
  </>
);

内容的提问来源于stack exchange，提问作者SABBIR SAM