如何实现点击列表项按钮时更新列表中的名称？

首先得修正原始数据的语法错误，footers 是包含对象的数组，正确写法如下：

const initialFooters = [{
  title: 'fruits',
  description: ['apple', 'banana', 'carrot']
}]

要实现点击替换文本的功能，核心是用React状态管理数据——直接修改常量变量不会触发组件重新渲染，具体实现步骤如下：

• 用useState将数据转为可响应的状态变量
• 给每个按钮绑定点击事件，在事件中定位目标项并更新状态

完整代码示例：

import { useState } from 'react';
import { Grid, Typography, Button } from '@mui/material'; // 注意你原代码里的button应该是MUI的Button组件，否则没有variant属性

export default function Footer() {
  // 初始化状态
  const [footers, setFooters] = useState([{
    title: 'fruits',
    description: ['apple', 'banana', 'carrot']
  }]);

  // 处理点击替换的函数
  const handleItemClick = (footerIndex, itemIndex, newText) => {
    // 复制当前状态，避免直接修改原数据（React状态不可直接修改）
    const updatedFooters = [...footers];
    // 替换指定位置的文本
    updatedFooters[footerIndex].description[itemIndex] = newText;
    // 更新状态，触发组件重新渲染
    setFooters(updatedFooters);
  };

  return (
    <Grid container spacing={4} justifyContent="space-evenly">
      {footers.map((footer, footerIndex) => (
        <Grid item xs={6} sm={3} key={footer.title}>
          <Typography variant="h6" color="text.primary" gutterBottom>
            {footer.title}
          </Typography>
          <ul>
            {footer.description.map((item, itemIndex) => (
              <li key={`${footer.title}-${itemIndex}`}> {/* 用标题+索引做key，避免替换文本后key冲突 */}
                <Button 
                  variant="subtitle1" 
                  color="text.secondary"
                  onClick={() => {
                    // 仅当点击的是carrot时替换为tomato，可根据需求调整判断逻辑
                    if (item === 'carrot') {
                      handleItemClick(footerIndex, itemIndex, 'tomato');
                    }
                  }}
                >
                  {item}
                </Button>
              </li>
            ))}
          </ul>
        </Grid>
      ))}
    </Grid>
  );
}

关键细节说明： #

• 状态复制：React要求必须通过setState传递新的状态引用来触发更新，所以用扩展运算符[...footers]创建数组副本后再修改内容，避免直接操作原状态。
• key的稳定性：原代码用item作为key，替换文本后key会从carrot变成tomato，可能导致组件不必要的重新挂载；用标题+索引作为key更稳定。
• 点击逻辑扩展：如果需要替换多个不同的文本，只需修改onClick中的判断条件即可，比如添加else if (item === 'apple')来处理其他项的替换。

内容的提问来源于stack exchange，提问作者takis Paras