React函数组件中Redux异步数据加载报错的解决咨询

问题根源 #

你用全局变量DataisLoaded的问题在于：全局变量变化不会触发React组件重渲染，所以数据加载完后组件不会自动更新。另外纠正你的误解：函数组件完全可以用状态，React现在主推函数组件+Hooks的写法，不用局限于类组件。

正确解决思路 #

不用额外的全局变量，直接基于Redux传入的sonucList来判断数据是否加载完成——当Redux里的API数据加载完成后，connect会自动把更新后的sonucList传给组件，触发重渲染。

修改后的代码 #

import React from "react";
import noviceImg from "./resources/kull.jpg";
import female1 from "./resources/f1.png";
import female2 from "./resources/f2.png";
import male1 from "./resources/m1.png";
import male2 from "./resources/m2.png";
import kendi from "./resources/kendi.png";
import styles from "./Personel.module.css";
import {
  Header,
  Subheader,
  Content,
  kendisi
} from "./components/Personelcomponents";
import { MdBorderColor } from "react-icons/md";
import { pink } from "@material-ui/core/colors";
import Navbar from "../../components/Navbar/Navbar";
import useWindowSize from "../../hooks/useWindowSize";
import Not from "./Not";
import { Container } from "@material-ui/core";
import { connect } from "react-redux";

// 移除全局DataisLoaded变量

const mapStateToProps = (state) => ({
  kimlikId: state?.account?.principal?.kimlikId,
  sonucList: state?.account?.principal?.sonucList,
});

const Personel = ({ sonucList }) => {
  // 直接根据传入的sonucList判断是否加载完成
  // 用可选链避免空值报错，同时确保有数据再渲染
  if (!sonucList?.sonucList || sonucList.sonucList.length === 0) {
    return (
      <div>
        <h1>请稍候加载数据...</h1>
      </div>
    );
  }

  return (
    <div className={styles.root}>
      <Navbar className={styles.navBar} />
      <Not className={styles.not} />
      <Content>
        <div className={styles.card_k}>
          <img alt="本人" src={kendi} />
          <b>
            <h4 className={styles.name}>İSİM</h4>
          </b>
          <p className={styles.cardtext}>
            <br />
            Baba Adı:
            <br />
            Yakınlık Derecesi: Kendisi
            <br />
            <div>
              <button type="button">Randevu Al</button>
            </div>
            <div></div>
            <br />
          </p>
        </div>

        <div className={styles.card_f}>
          <img alt="女性" src={female1} />
          <h4 className={styles.name}>İSİM</h4>
          <p className="card-text">
            Ana Adı:{sonucList.sonucList[0].bireyAd}
            <br />
            Baba Adı:
            <br />
            Yakınlık Derecesi:
            <br />
            <button type="button">Randevu Al</button>
            <div></div>
            <br />
          </p>
        </div>
        <div className={styles.card_f}>
          <img alt="女性" src={female1} />
          <h4 className={styles.name}>İSİM</h4>
          <p className="card-text">
            Ana Adı:
            <br />
            Baba Adı:
            <br />
            Yakınlık Derecesi:
            <br />
            <button type="button">Randevu Al</button>
            <div></div>
            <br />
          </p>
        </div>

        <div className={styles.card_m}>
          <img alt="男性" src={male2} />
          <h4 className={styles.name}>İSİM</h4>
          <p className="card-text">
            Ana Adı:
            <br />
            Baba Adı:
            <br />
            Yakınlık Derecesi:
            <br />
            <div>
              <button type="button">Randevu Al</button>
            </div>
            <div></div>
            <br />
          </p>
        </div>

        <div className={styles.characterBox}>
          <h2>Sorceress</h2>
          <img alt="角色" src={noviceImg} />
        </div>
        <div className={styles.characterBox}>
          <h2>Sorceress</h2>
          <img alt="角色" src={noviceImg} />
        </div>
        <div className={styles.characterBox}>
          <h2>Sorceress</h2>
          <img alt="角色" src={noviceImg} />
        </div>
      </Content>
    </div>
  );
};

export default connect(mapStateToProps)(Personel);

关键修改点说明 #

• 移除全局DataisLoaded变量：全局变量无法触发React的重渲染机制，完全起不到作用。
• 基于Redux传入的sonucList判断加载状态：用sonucList?.sonucList做可选链判断，避免空值导致的报错；同时判断数组长度，确保有有效数据再渲染页面。
• 修正了非法标签：原来的<button_k>和<button_m>不是合法HTML标签，改成标准的<button>。
• 纠正认知误区：函数组件不仅能用状态（比如useState、useReducer），而且现在React官方更推荐函数组件的写法，类组件已经不是必须选项。

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