始终列出 returns 未定义

Question

我对 ReactJS 非常陌生，我不知道我做错了什么，但我的城市列表总是返回未定义。数字列表呈现得很好。在过去的 3 个小时里，我一直在与此作斗争，我只是被难住了。

有人能帮帮我吗？

我使用了 create-react-app 并从 index.js 文件中删除了 React.StrictMode。我所做的一切都在 App.js.

import logo from './logo.svg';
import './App.css';
import React from 'react';

console.clear();

//Simple List of numbers
let numbers = [1, 2, 3, 4, 5];
let numberList = numbers.map((number) =>
  <li key={number}>{number}</li>
);

//we would pull something from a db and pass it to the function
let cities = ['Boise', 'Nampa', 'Meridian', 'Caldwell'];
let Cities = (arrayList) => {
  
  let cities = arrayList.cities;
  console.log(cities);
  let cityList = cities.map((item, index) =>{
    <li key={index}>{item}</li>
  });
  console.log(cityList);
  return(
    <ul>{cityList}</ul>
  );

  /*
  return(
    <ul>
      {
        //You cannot use a forEach it will always return undefined. ReactJS needs a key so we can use the index of the item
        cities.map((item, index) =>{
          <li key={index}>{item}</li>
        })
      }
    </ul>
  );
  */

};

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h2>It is {new Date().toLocaleTimeString()}</h2>
        <div>
          <h2>Numbers</h2>
          <ul>{numberList}</ul>
        </div>
        <div>
          <h2>Cities</h2>
          <Cities cities={cities}/>
        </div>
      </header>
    </div>
  );
}

export default App;

Answer 1

你有大括号，这意味着这是一个函数，你需要 return 一些东西。例如return <li ...。更有可能的是，您希望大括号成为圆括号。

let cityList = cities.map((item, index) =>{
    <li key={index}>{item}</li>
});

您想要其中之一：

let cityList = cities.map((item, index) =>{
    return <li key={index}>{item}</li>
});

let cityList = cities.map((item, index) => (
    <li key={index}>{item}</li>
));

始终列出 returns 未定义

List always returns undefined

javascript

arrays

reactjs