React 点击按钮后 Anime 列表为什么没有更新？

2026-11-06数据小许

结论

问题在按钮的事件绑定上：onChange 用于处理值变化，不会响应按钮点击，所以点击“Add Anime”时，handleAddAnime 没有运行。改用 onClick 后，处理函数会读取输入值并更新 anime 状态，React 随后会重新渲染列表。

需要修改这一行：

<button onChange={handleAddAnime}>Add Anime</button>

改成：

<button onClick={handleAddAnime}>Add Anime</button>

修正后的组件

下面的组件保留了原来的输入框读取方式，并用函数式更新添加 Anime：

import React, { useState } from 'react';

function AnimeList() {
  const [anime, setAnime] = useState([
    'Attack on Titan',
    'Kimi No Wa',
    'Sakamoto Days',
  ]);

  function handleAddAnime() {
    const input = document.getElementById('animeInput');
    const animeAdd = input.value.trim();

    if (!animeAdd) return;

    setAnime((currentAnime) => [...currentAnime, animeAdd]);
    input.value = '';
  }

  return (
    <div>
      <h2>Anime list</h2>
      <ul>
        {anime.map((name, index) => (
          <li key={index}>{name}</li>
        ))}
      </ul>
      <input
        type="text"
        placeholder="input anime name"
        id="animeInput"
      />
      <button onClick={handleAddAnime}>Add Anime</button>
    </div>
  );
}

export default AnimeList;

为什么没有报错

setAnime([...anime, animeAdd]) 写在 handleAddAnime 中。按钮绑定的是 onChange，点击时不会触发这个处理函数，因此状态更新代码也没有运行。代码没有执行，通常不会因此产生控制台错误。

状态更新后，React 会用新的 anime 数组重新渲染 <ul>。示例通过 setAnime((currentAnime) => [...currentAnime, animeAdd])，让更新使用执行时最新的状态值。

注意事项

示例用 trim() 去掉输入内容首尾的空格，并跳过空输入。若想让输入值的管理更符合 React 的状态管理习惯，可以用 useState 保存输入框的值，而不是通过 document.getElementById 直接读写 DOM。修复按钮点击无响应的问题，只需将事件改为 onClick。