分别显示自定义字段和映射字段 - reactJS

Question

我有一个映射器，它需要一些所有者，然后为每个所有者取出一些字段来填充它们。我还想添加一个自定义字段，在我的例子中是“手动添加”，但是当我将它们放入数组中时，映射字段仅显示为 1 个选项，我希望将它们拆分成许多。这是我的代码：

const owningCompanyOwners = [
        company.owners.map((owner) => {
            return { label: owner.fullName + " - " + owner.role, value: owner }
        }),
        { label: "+ Add manually", value: "" }
    ]

数组似乎不是在 reactJS 中实现它的好方法 - 有没有人有任何其他想法？这些是我用于单选按钮的选项。

我还附上了它目前的样子和应该是什么样子的图片。

现状：

想要的产品：

谢谢！

Answer 1

尝试这样的事情：

import "./styles.css";
export default function App() {
  const company = {
    owners: [
      {
        fullName: "Elsa Esvensson",
        role: "Manager"
      },
      {
        fullName: "Jonas Andersson",
        role: "Manager"
      }
    ]
  };
  const owningCompanyOwners = company.owners
    .map((owner, index) => ({
      label: owner.fullName + " - " + owner.role,
      value: owner
    }))
    .concat({ label: "+ Add manually", value: "" });
  return (
    <div className="App">
      {owningCompanyOwners.map((item, index) => {
        return (
          <div>
            <label>{item.label}</label>
            <input name="owner" type="radio" />
          </div>
        );
      })}
    </div>
  );
}

分别显示自定义字段和映射字段 - reactJS

Displaying custom field as well as mapped fields separately - reactJS

javascript

radio-button

reactjs