小编for*_*ort的帖子

const useStyles = makeStyles(theme => ({
  wrapper: {
    width: "300px"
  },
  text: {
    width: "100%"
  },
  button: {
    width: "100%",
    marginTop: theme.spacing(1)
  },
  select: {
    width: "100%",
    marginTop: theme.spacing(1)
  }
}));

有没有办法在上述变量中​​使用 CSS @media？

如果不可能，我怎样才能使我的自定义 css 响应？

我的 React 应用程序在表单标签上有 20 多个字段。我的工作代码如下

function DriverForm() {
    const [formData1, setFormData1] = useState(1);
    const [formData2, setFormData2] = useState(2);
    const [formData3, setFormData3] = useState(3);
    const [formData4, setFormData4] = useState(4);
    const [formData5, setFormData5] = useState(5);

    const handleSubmit = (event) => {
        event.preventDefault();
    };

    return (
        <div className="wrapper">
            <form onSubmit={handleSubmit}>
                <input value={formData1} onChange={(e) => setFormData1(e.target.value)} />
                <input value={formData2} onChange={(e) => setFormData2(e.target.value)} />
                <input value={formData3} onChange={(e) => setFormData3(e.target.value)} />
                <input value={formData4} onChange={(e) => setFormData4(e.target.value)} />
                <input value={formData5} onChange={(e) => setFormData5(e.target.value)} />
                <button type="submit">Submit</button>
            </form> …

我需要每 6 秒自动重新渲染一次，我定义了如下所示的组件。

const KioskPage = () => {

  const [time, setTime] = useState(Date.now())

  useEffect(() => {

    timeInterval = setInterval(() => setTime(Date.now()), 60000)

    return () => {
      clearInterval(timeInterval)
    }
  }, [])
}

但我收到了通知：

每次渲染后，React Hook useEffect 内部对 'timeInterval' 变量的赋值将丢失。要随着时间的推移保留该值，请将其存储在 useRef Hook 中，并将可变值保留在 '.current' 属性中。否则，您可以直接在 useEffect react-hooks/exhaustive-deps 中移动此变量

为什么会发生这种情况？以及如何解决此问题？

问候