ReactJS实现点击按钮切换Expand/Hide文本功能求助

你的核心问题是状态更新时没有正确处理数组的不可变性，导致React无法检测到状态变化并更新视图。这里提供两种可行方案：

方案一：基于现有状态结构修改 #

直接完善expandFunc的逻辑，必须创建新数组来更新状态，不能直接修改原状态数组：

const expandFunc = (ind) => {
  setButton(prevButtons => {
    // 复制原状态数组，避免直接修改原数据
    const updatedButtons = [...prevButtons];
    // 切换当前按钮的文本
    updatedButtons[ind].pin = updatedButtons[ind].pin === 'Expand' ? 'Hide' : 'Expand';
    return updatedButtons;
  });
}

方案二：优化状态结构（更简洁推荐） #

其实不需要单独维护button数组，只需要记录每个可展开项的展开状态即可，状态会更轻量化：

export default function App() {
  // 用对象记录可展开项的状态，键为索引，值为布尔值表示是否展开
  const [expanded, setExpanded] = useState({});

  const dataObj = [
    { title: 'Home' },
    { title: 'Service', subItems: ['cooking','sleeping'] },
    { title: 'Contact', subItems: ['phone','mobile'] }
  ];

  const expandFunc = (ind) => {
    // 切换对应索引的展开状态
    setExpanded(prev => ({
      ...prev,
      [ind]: !prev[ind]
    }));
  }

  return (
    <div className="App">
      {dataObj.map((arr, ind) => (
        <div key={ind}> {/* 列表渲染必须加key，帮助React识别列表项变化 */}
          <span>{arr.title}:</span>
          {arr.subItems && (
            <button onClick={() => expandFunc(ind)}>
              {/* 根据展开状态显示对应文本 */}
              {expanded[ind] ? 'Hide' : 'Expand'}
            </button>
          )}
        </div>
      ))}
    </div>
  );
}

额外提醒：如果你的数据有唯一标识（比如每个对象自带id），列表渲染时的key最好用这个唯一标识，而不是索引，这样在列表项顺序变化时React能更高效地更新视图。

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