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

【问题标题】：Displaying custom field as well as mapped fields separately - reactJS分别显示自定义字段和映射字段 - reactJS
【发布时间】：2021-08-16 20:32:08
【问题描述】：

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

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

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

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

现状：

所需产品：

谢谢！

【问题讨论】：

您是否希望“手动添加”始终存在于数组末尾？
是的，我会@MajidMohammadi
company 是一个状态吗？或者它只是一个定义的数组？
一个已定义的数组 - 它包含模拟数据。我已经设法通过按照owningCompanyOwners.push( { label: "+ Add manually", value: "" } ) 的方式添加它，但不确定这是最好的解决方案。

标签： javascript reactjs radio-button

【解决方案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>
  );
}

【讨论】：