React函数组件状态更新后列表不渲染？问题排查与解决

首先，你的代码里有几个关键问题导致列表无法正常渲染，还有一个容易忽略的细节影响输入体验，咱们一步步拆解：

1. 违反React钩子规则：在JSX渲染逻辑中调用useEffect #

React的钩子（比如useEffect）有严格的使用规范：必须在组件的顶层作用域调用，不能嵌套在JSX表达式、条件判断、循环这类逻辑里。你直接在<ul>的{}里调用useEffect，这种写法不符合规则，React不会执行这个钩子的逻辑，自然就不会渲染出列表项。

而且其实完全没必要用useEffect来渲染列表——React会自动监听persons状态的变化，当状态更新时组件会自动重新渲染，你只需要在JSX里直接使用状态值就行。

2. 数组处理逻辑错误 #

persons本身就是一个对象数组，你不需要用Object.values(...persons)来处理：

• ...persons会把数组展开成多个独立的对象（比如{name: "Arto Hellas"}、{name: "xxx"}），但Object.values()只接受单个对象作为参数，这里的写法逻辑完全错误。
• 正确的做法是直接对persons数组调用map方法，遍历每个对象，取出name属性渲染即可。

3. 输入事件中不必要的preventDefault #

你的handleNameInput函数里调用了e.preventDefault()，这会阻止输入框的默认行为（也就是显示用户输入的字符），虽然你说能更新newName状态，但实际使用时输入框会无法正常输入内容，这个必须去掉。

修正后的完整代码 #

import { useState } from "react";

const App = () => {
  const [persons, setPersons] = useState([{ name: "Arto Hellas" }]);
  const [newName, setNewName] = useState("");

  const handleNameInput = (e) => {
    // 移除不必要的preventDefault，让输入框正常工作
    setNewName(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setPersons(prevState => [...prevState, {name: newName}]);
    // 提交后清空输入框，提升用户体验
    setNewName("");
  };

  return (
    <div>
      <h2>Phonebook</h2>
      <form onSubmit={handleSubmit}>
        <div>
          name: 
          {/* 加上value绑定，让输入框成为受控组件，确保状态与显示同步 */}
          <input onChange={handleNameInput} value={newName} />
        </div>
        <div>
          <button type="submit">add</button>
        </div>
      </form>
      <div>debug: {newName}</div>
      <h2>Numbers</h2>
      <ul>
        {/* 直接遍历persons数组，渲染每个对象的name属性 */}
        {persons.map((person, index) => (
          <li key={index}>{person.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

额外优化说明 #

• 给输入框加上value={newName}，让它变成受控组件，确保输入框的显示值和newName状态完全同步，这是React表单开发的最佳实践。
• 表单提交后调用setNewName("")清空输入框，避免用户手动删除内容，提升体验。
• 这里用index作为key暂时可以工作，但如果后续需要对数组做删除、排序操作，建议给每个对象添加唯一标识（比如id）作为key，避免出现渲染异常。

内容的提问来源于stack exchange，提问作者Paweł Stępniak