TypeError：无法根据 id 读取属性“组件”答案

【问题标题】：TypeError: Cannot read property 'component' based on idTypeError：无法根据 id 读取属性“组件”
【发布时间】：2021-05-19 12:36:22
【问题描述】：

在我的 React 应用程序中，我想根据 id 呈现不同的组件。目前，我正在使用开关盒进行此操作。但是，我想根据正在呈现的组件将不同的字符串传递到标题中。我在 App.js 中创建了这样的步骤对象

** 显示错误的示例**：

https://stackblitz.com/edit/react-otwg1l

function App() {
    const [intialized, setInitialized] = useState(false);
  
    const steps = [
      {
        id: 'location',
        title: 'Select your store',
        nextStep: 'step 2',
        component: Comp1,
      },
      {
        id: 'questions',
        title: 'Answer Question',
        nextStep: 'step 3',
        component: Comp2,
      },
      {
        id: 'appointment',
        title: 'make and appointment',
        nextStep: 'step 4',
        component: Comp3,
      },
      {
        id: 'inputData',
        title: 'Add Data',
        nextStep: 'step 5',
        component: Comp4,
      },
      {
        id: 'summary',
        title: 'The End',
        nextStep: 'summary',
        component: Comp5,
      },
    ];
  
  
    return (
      <>
        <ThemeProvider theme={theme}>
          <SiteHeader />
          <div className="container">
            <ApptHeader steps={steps} />
            <Step steps={steps} />
          </div>
        </ThemeProvider>
      </>
    );
  }
  
  export default withRouter(App);

然后我将steps 传递到我的 Step.js 组件中

import React from 'react'

import { useStep } from 'react-hooks-helper';

const Step = ({ steps }) => {
  const { step, navigation } = useStep({ initialStep: 0, steps });
  const { id } = step;
  const props = { navigation };

  const Component = steps[id].component;
  return <Component {...props} steps={steps} />;
};

export default Step;

但是，当我尝试这个时，我收到以下错误：

TypeError: Cannot read property 'component' of undefined 这行代码：const Component = steps[id].component;

在 AppJS 中，步骤的控制台日志返回以下信息：

(5) [{…}, {…}, {…}, {…}, {…}]
0: {id: "location", title: "Select your store", nextStep: "step 2", component: ƒ}
1: {id: "questions", title: "Answer Question", nextStep: "step 3", component: ƒ}
2: {id: "appointment", title: "make and appointment", nextStep: "step 4", component: ƒ}
3: {id: "inputData", title: "Add Data", nextStep: "step 5", component: ƒ}
4: {id: "summary", title: "The End", nextStep: "summary", component: ƒ}

但是，在 Step 组件中，steps 控制台日志为 undefined，因为该组件未呈现。 id 出现此错误的原因是什么？修复它的最佳方法是什么？

【问题讨论】：

标签： javascript reactjs react-hooks react-hook-form

【解决方案1】：

Steps 是一个数组，所以你需要像下面这样过滤组件：-

const Component = steps.find(innerStep => innerStep.id === id).component;

【讨论】：

这是对我有用的解决方案。感谢您的帮助。

【解决方案2】：

兄弟，试试这个。希望这会有所帮助。

const { id, component: Component } = step;

return <Component {...props} steps={steps} />;

问题是您正在steps 数组中搜索与“id”匹配的索引。但是数组有像steps[0]这样的数字类型索引。但是这里id是一个字符串。

【讨论】：