React Hooks：如何从对象数组中获取数据？

Question

我现在有一个包含组件和标题的对象数组对一组对象做同样的事情，

这是我的部分代码

  //array of objects
 const templates =[
  {
    title: "TemplateOne",
    component: TemplateOne,
  },
  {
    title: "TemplateTwo",
    component: TemplateTwo,
  }]

 //find the component and match the id passed in URL parameters
let SelectedComponent = templates.find(function (Component, idx) {
    if (idx === Number(templateId)) {
      return true;
    }
    return false;
  });`

我这样显示组件

<div>
  <SelectedComponents />
</div>

但我收到如下错误

index.js:1 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

我需要进行哪些更改才能使其按预期工作？

Answer 1

在react中，组件的名字应该以UpperLetter开头，Array.prototype.find()函数返回Array的一个元素。 即{标题：'blabla ...'，组件：Blablaba} 因此，我们需要名为“Component”或 UpperLetter 前导变量的子组件。 在这里我们可以如下使用它。

//array of objects
const templates = [
    {
      title: 'TemplateOne',
      component: TemplateOne,
    },
    {
      title: 'TemplateTwo',
      component: TemplateTwo,
    },
  ];
  const templateId = 4;
  //find the component and match the id passed in URL parameters
  const { component: Component } =
    templates.find((Component, idx) => {
      return idx === +templateId;
    }) || {};
  return <div>{Component && <Component />}</div>;

Answer 2

SelectedComponent 的值将是一个具有title 和component 属性的对象。您只需渲染组件，如果您愿意，也可以传入 title 属性。

//array of objects
const templates = [{
    title: "TemplateOne",
    component: TemplateOne,
}, {
    title: "TemplateTwo",
    component: TemplateTwo,
}]

//find the component and match the id passed in URL parameters
const {component: SelectedComponent, title} = templates.find(function(Component, idx) {
    if (idx === Number(templateId)) {
        return true;
    }
    return false;
}) ?? {};

return (<div>
  {SelectedComponent && <SelectedComponent title={title} />} {/* Or don't include the title prop if you don't need to */}
</div>);