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

【问题标题】：React TS: wait for props before calling function with props as argumentsReact TS：在使用道具作为参数调用函数之前等待道具
【发布时间】：2021-11-10 16:28:05
【问题描述】：

我通过功能组件使用 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>
  );
};

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

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

在Skills 组件中，当我使用useEffect 挂钩控制台记录数据时，道具包含数据，但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);

我在这里错过了什么？

【问题讨论】：

skills 和 columns 道具从何而来？如何将它们传递给Skills 组件？
我将父组件添加到问题中，以便您查看道具是如何传递的
useFetch 是自定义钩子还是来自像 react-query 这样的库？
这是一个自定义钩子，适用于其他组件
您确定data 始终是假的（例如undefined）还是带有skills 和n_skills_columns 键的对象？

标签： reactjs typescript

【解决方案1】：

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

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

  return ...;
}

如果你不想在skills_和columns_加载之前渲染Skills组件，那么在父组件中添加一个加载指示器：

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

【讨论】：

这正是我想要的。