React Toastify Alert不显示：单选按钮交互无弹窗问题排查

你代码里的核心问题是没有在React组件树中添加<ToastContainer />组件——react-toastify需要这个容器来渲染提示框，哪怕你调用了toast方法，没有容器的话提示根本没地方显示。

具体修复步骤： #

1. 修正导入语句，确保引入正确的容器组件：

import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

（你之前导入的Toastify是旧版本组件，新版本react-toastify使用ToastContainer）

2. 在当前组件的JSX结构中添加<ToastContainer />，比如放在页面内容的外层或末尾：

function YourSettingsComponent() {
  // ...你的状态定义和changeSettingsMain函数

  return (
    <div>
      {/* 原有的单选按钮列表 */}
      <ListGroup variant="flush" data-cy="label-choice">
        <ListGroup.Item className="settings-listgroup-item">
          <Form.Check
            type={"radio"}
            id={"ENGLISH"}
            name={"label_type"}
            label={"Plain English labels"}
            defaultChecked={settings.label === "ENGLISH"}
            value={settings.label === "ENGLISH"}
            onChange={changeSettingsMain}
            style={{ fontWeight: "bold", fontSize: "105%", paddingLeft: "35px" }}
          />
        </ListGroup.Item>
        {/* 其他单选按钮 */}
      </ListGroup>

      {/* 必须添加的Toast容器 */}
      <ToastContainer position="top-right" />
    </div>
  );
}

3. 额外优化：如果settings是React状态变量，不要直接修改它，应该用状态更新函数来触发组件重新渲染（这不是Toast不显示的直接原因，但属于React规范问题）：

// 假设settings是用useState声明的
const [settings, setSettings] = useState({ label: "ENGLISH" });

const changeSettingsMain = (e) => {
  const newSettings = { ...settings, label: e.target.id };
  setSettings(newSettings);
  window.localStorage.setItem("settings", JSON.stringify(newSettings));
  console.log("SAVED");
  toast.success("Saved!");
};

补充说明： #

• 可以把<ToastContainer />放在App.js这类根组件中，这样整个应用都能复用toast提示能力，不用每个页面单独添加。
• 如果需要自定义提示框的样式、时长等参数，都可以通过ToastContainer的props配置。

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