如何设置页面首次加载时默认选中首个Soup按钮

当前页面首次加载时无按钮被选中，选中按钮后右侧黑色区域会展示对应数据，现需将首个“Soup”按钮设置为默认选中状态，具体实现步骤如下：

• 找到项目中管理按钮选中状态的useState钩子，将状态初始值设置为“Soup”对应的标识值（比如按钮绑定的value字段，假设为soup）
• 示例代码修改：

// 原状态初始化（未选中任何按钮）
const [selectedItem, setSelectedItem] = useState(null);

// 修改为默认选中Soup
const [selectedItem, setSelectedItem] = useState("soup");

• 确保按钮组件的选中状态与该状态关联，比如按钮的选中判定逻辑为selectedItem === "soup"，这样页面加载时该按钮会自动处于选中状态，同时右侧黑色区域也会同步展示对应的数据

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