React 16 升级 - 选择列表返回 Object Object答案

【问题标题】：React 16 upgrade - select lists return Object ObjectReact 16 升级 - 选择列表返回 Object Object
【发布时间】：2020-11-13 12:05:30
【问题描述】：

我有一个应用要从 React 15 升级到 React 16

在某些映射和使用 React 15 中工作的选择列表的情况下，现在无法正常工作 - 我发现选择列表正在返回 [object, Object] 的列表

这是我的代码

  let carTypes = ["ford", "volvo", "tesla", "BMW"];

  return (
        <div>
          <select>
            {carTypes.map((carType, key) => {
              return (
                <option
                  key={key}
                >
                  <span>{carType}</span>
                </option>)
            })}
          </select>

          <ul>
            {carTypes.map((carType, key) => {
              return (
                <li
                  key={key}
                >
                  <span>{carType}</span>
                </li>)
            })}
          </ul>
        </div>
    )

所以在上面的代码中，选择列表将在浏览器中呈现一个带有 4 个选项的选择列表 - 所有选项都显示为 [object, Object]

下面的无序列表返回 4 项，并在显示 4 种汽车类型的浏览器中正确呈现它们

我的猜测是 React 16 中的选择列表标记已更改，但我没有找到相关文档

如果有人能指出我正确的方向/建议或向我展示一些很棒的文档！

【问题讨论】：

将carType.map((filingType, key)更改为carTypes.map((filingType, key)
你只是拼错了。你确实把 carType 是一个数组而不是 FilingType
而且carTypes地图功能中也不存在carType
抱歉@A.R.SEIF 的一些错别字 - 现在都已修复，希望更清晰
抱歉@DarthJS 的一些拼写错误 - 现在都已修复，希望更清晰

标签： reactjs react-16

【解决方案1】：

我写了这段代码。

let carTypes = ["ford", "volvo", "tesla", "BMW"];

  return (
    <div>
      <select>
        {carTypes.map((carType, key) => {
          return <option key={key}>{carType}</option>;
        })}
      </select>

      <ul>
        {carTypes.map((carType, key) => {
          return (
            <li key={key}>
              <span>{carType}</span>
            </li>
          );
        })}
      </ul>
    </div>
  );

工作演示

【讨论】：

【解决方案2】：

从选项标签中删除跨度标签

let carTypes = ["ford", "volvo", "tesla", "BMW"];

    return (
        <div>
            <select>
                {carTypes.map((carType,key) => {
                    return (
                        <option
                           key={key}
                        >
                            {carType}
                        </option>)
                })}
            </select>

            <ul>
                {carTypes.map((carType, key) => {
                    return (
                        <li
                            key={key}
                        >
                            <span>{carType}</span>
                        </li>)
                })}
            </ul>
        </div>
    )

【讨论】：