Javascript React组件干式重构

我正试图重构代码，使之更干净一些

这个元素

const {type} = this.state
...
<div>
  <label>Some label:
    <select
      name="type"
      onChange={this.onSelect}
      className="form-control form-select mb-2">
      {type.map(item => (
        <option key={item.value} value={item.value}>{item.name}</option>
      ))}
    </select>
  </label>
</div>

由于许多相同的

select

OR，我希望有单独的组件，如下所示：

const SelectInputGroup = ({
  label,
  name,
  onChange
}) => {
  return (
    <div><label>{label}
    <select
      name={name}
      onChange={onChange}
      className="form-control form-select mb-2 mr-3">
      {name.map(item => (  <<<-- error here
        <option key={item.value} value={item.value}>{item.name}</option>
      ))}
     </select>
     </label>
    </div>
  )
}

const SelectInputGroup=({
标签，
名称
一旦改变
}) => {
返回(
{label}
{name.map（item=>（
name
=
type
（一个字符串，而不是数组）。这是传递给
SelectInputGroup
的内容。您可能希望传递
name={This.state.type}
。
type
是
const{type}=This.state
-它是一个数组
name=“type”
是一个字符串，
name={type}
是一个数组。正如@Federkun所指出的，您将
名称作为字符串传递给您的
SelectInputGroup
。然后您将从道具中对其进行分解。因此，它现在不是组件中的一个数组。非常感谢2，它现在可以工作了。
const SelectInputGroup = ({
  label,
  name,
  onChange
}) => {
  return (
    <div><label>{label}
    <select
      name={name}
      onChange={onChange}
      className="form-control form-select mb-2 mr-3">
      {name.map(item => (  <<<-- error here
        <option key={item.value} value={item.value}>{item.name}</option>
      ))}
     </select>
     </label>
    </div>
  )
}

<SelectInputGroup
  label="Some Label"
  name="type"
  onChange={this.OnSelect}
/>