React使用map渲染对象时提示'person'未定义如何解决？

我想渲染对象中的信息，使用了如下map方法：

<ul> 
    {persons.map(person => <li key={person.id}> person.name </li>)}
</ul>

VS Code和浏览器控制台均无报错，但页面显示'person'未定义。我认为自己的map方法执行正确，请问该如何修复？

以下是完整代码：

App.js #

import { useState } from 'react'

const App = () => {
  const [persons, setPersons] = useState([
    { 
      name: 'Arto Hellas',
      id: 1 
    }
  ])

  const [newName, setNewName] = useState('')

  const addName = (event) => {
    event.preventDefault()

    const nameObject = {
      name: newName,
      id: persons.length + 1
    }

    setPersons(persons.concat(nameObject))
    setNewName('')
  }
  console.log(persons)

  const handleNameChange = (event) => {
    setNewName(event.target.value)
  }

  return (
    <div>
      <h2> Phonebook </h2>

      <form onSubmit={addName}>
        <div>
          name: <input value={newName} onChange={handleNameChange} />
        </div>
        <div>
          <button type="submit"> add </button>
        </div>
      </form>

      <h2> Numbers </h2>

      <ul> 
        {persons.map(person => <li key={person.id}> person.name </li>)}
      </ul>
      

    </div>
  )
}

export default App

index.js #

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(<App />)

问题出在JSX的变量渲染语法上：你在<li>标签里直接写了person.name，这会被React当作普通字符串处理，而非读取变量person的name属性。

只需把person.name用大括号{}包裹，React就会识别这是一个JS表达式并执行它。修改后的map代码如下：

<ul> 
  {persons.map(person => <li key={person.id}> {person.name} </li>)}
</ul>

原理：在JSX中，所有需要执行的JavaScript表达式（比如变量、属性访问、函数调用等）都必须放在大括号内，否则会被视为纯文本内容。你之前的写法里，person.name未被包裹，页面会直接显示字符串"person.name"，同时浏览器解析时会误判你引用了未定义的全局变量person，从而抛出"person未定义"的提示。

内容的提问来源于stack exchange，提问作者Jabri Juhinin