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

Question

我有一个要升级的应用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但我没有找到相关文档

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

Answer 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>
  );

工作演示

Answer 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>
    )