时间戳

首页 > 解决方案 > React TS：在使用道具作为参数调用函数之前等待道具

reactjs - React TS：在使用道具作为参数调用函数之前等待道具

问题描述

我通过功能组件使用 React。我的一个组件具有由其父组件传递的道具，例如：

const About = () => {
  const { data } = useFetch('About');

  return (
    <div>
      {data && (
        <div>
          <Title title={data.custom_title} />
          <Card
            text={data.body}
          >
            <Skills skills={data.skills} columns={data.n_skills_columns} />
          </Card>
        </div>
      )}
    </div>
  );
};

这些道具在函数中用于在渲染道具数据之前对其进行操作，例如：

const Skills: FC<SkillsProps> = ({ skills, columns }): JSX.Element => {
  const skillsTable = sliceArray(skills, columns);
  return (
    <div>
      skillsTable.map(...)
    </div>
  );
};

在Skills组件中，当我使用 useEffect 钩子 console.log 数据时，道具包含数据，但sliceArray()抱怨它的参数是undefined.

我已经尝试过的：

const Skills: FC<SkillsProps> = ({ skills_, columns_ }): JSX.Element => {
  const [skills, setSkills] = useState([]);
  const [columns, setColumns] = useState(1);

  useEffect(() => {
    setSkills(skills_);
    setColumns(columns_);
  }, []);

  const skillsTable = sliceArray(skills, columns);

我在这里想念什么？

标签： reactjstypescript

解决方案

您可以为解构的道具添加默认值。不需要useEffector useState（除非您在Skills组件中以某种方式修改这些值）。

const Skills: FC<SkillsProps> = ({ skills = [], columns = 1 }) => {
  const skillsTable = sliceArray(skills, columns);

  return ...;
}

如果之前根本不想渲染Skills组件skills_并被columns_加载，那么在父组件中添加加载指示器：

const ParentComponent = () => {
  const skills = ...;
  if (!skills) return <>Loading skills...</>;
  return <Skills skills={skills} />;
}

推荐阅读