如何将React JS中Header组件的title设置为数组的指定元素

AI 小北

2026-9-29

根因说明

你代码中声明的shoppinglist、currentitem都是普通JS变量，React不会监听这类变量的变更，也不会因为这类变量的修改触发组件重新渲染，所以即使你修改了数组内容，页面上的Header组件属性也不会更新。

修复方案

你需要使用React的useState Hook存储响应式数据，同时修改数组时要遵循不可变原则，返回新的数组实例触发组件重渲染。修改后的完整代码如下：

import { useState } from 'react';
import Header from './components/Header';

const App = () => {
  // 用useState声明响应式状态
  const [shoppingList, setShoppingList] = useState([]);
  const [currentItem, setCurrentItem] = useState("");

  function getData(val){
    console.warn(val.target.value)
    // 更新输入框内容的响应式状态
    setCurrentItem(val.target.value);
  }

  function logData() {
    // 不可变原则：基于原数组生成新数组，传入set方法触发更新
    setShoppingList(prev => [...prev, currentItem]);
  }

  function deleteItem() {
    // 不可变原则：生成删除最后一个元素后的新数组
    setShoppingList(prev => prev.slice(0, -1));
  }

  return (
    <div className="Container">
        <Header title = "grocery list" />
        <input type="text" onChange={getData}></input>
        <button onClick={logData}>add item to list</button>
        <button onClick={deleteItem}>delete item</button>
        <div className="listItems">
          {/* 兼容数组为空的情况，避免传undefined给title */}
          <Header title = {shoppingList[0] || "暂无列表项"} />
        </div>
    </div>
  );
}

export default App;