Question

我有代表simple的子组件。我的想法是将一些获取的数据传递到其父组件。我的状态是这样的：state: { countries: [] }，我在componentDidMount()中获取了数据。 state.countries充满了一些id和countryName值。当我这样写代码

   <select
      name="country"
      defaultValue="country"
      onChange={this.onChangeHandler}
    >
      <option disabled value="country">
        Select country
      </option>
      {countries.map(({ id, countryName }) => (
        <option key={id} value={id}>
          {countryName}
        </option>
      ))}
    </select>

它完美地工作。但是当我尝试通过像这样的道具传递属性时：

<Select 
          name="country"
          defaultValue="country"
          onChange={this.onChangeHandler}
          defaultOption="Select Country"
          apiResult={countries}
          dataId={countries.id}
          dataName={countries.countryName}
          disabled="disabled"
        />

失败。父组件如下所示：

const { name, label, onChange, defaultValues, apiResult, defaultOption, dataId, dataName, disabled } = props;
<select name={name} value={defaultValues} onChange={onChange} id="">
    <option disabled={disabled} value={defaultOption}>{defaultOption}</option>
    {apiResult.map(() => (
      <option key={dataId} value={dataId}>
        {dataName}
      </option>
    ))}
  </select>

我在做什么错？预先感谢！

Answer 1

.map方法必须以其他方式使用。作为第一个参数，您将获得序列中的当前项目。所以：

<select name={name} value={defaultValues} onChange={onChange} id="">
    <option disabled={disabled} value={defaultOption}>{defaultOption}</option>
   {apiResult.map((apiItem) => (
     <option key={apiItem.key} value={apiItem.id}>
       {dataName}
     </option>
   ))}
  </select>

因此您可以像这样调用组件：

<Select 
      name="country"
      defaultValue="country"
      onChange={this.onChangeHandler}
      defaultOption="Select Country"
      apiResult={countries}
      disabled="disabled"
    />

如果dataId={countries.id}是数组，则

dataName={countries.countryName}和countries毫无意义。

如何将道具从孩子传递到父母组件中的map（）？

1 个答案: