为什么 rem 的值没有变化？

Question

我正在尝试在 React 中制作一个简单的 px 到 rem 转换器。但是当px的值改变时，变量rem的值并没有改变。这是代码：

import React, { useState } from "react";
import "./App.css";

function App() {
    const [pixel, setPixel] = useState(0);
    const [rem, setRem] = useState(0);
    return (
        <div className="app">
            <div className="header">
                <h1>PX To REM Converter</h1>
            </div>
            <div className="conversion">
                <div className="value">
                    <form action="" className="form">
                        <input
                            type="text"
                            name="px"
                            placeholder="PX"
                            onChange={(e) => setPixel(e.target.value) && setRem(e.target.value / 16)}
                        />
                    </form>
                </div>
                <div className="answer">
                    <p>{rem} REM</p>
                </div>
            </div>
        </div>
    );
}

export default App;

Answer 1

setState() 是 setter 并没有 return 任何东西。由于它没有 return 任何东西，setPixel(e.target.value) 的计算结果为 undefined，因此 && 之后的部分不是运行。这就是 &&（逻辑与）的工作原理。

Logical AND (&&) evaluates operands from left to right, returning immediately with the value of the first falsy operand it encounters; if all values are truthy, the value of the last operand is returned.

你可以这样做：

onChange={(e) => {
setPixel(e.target.value);
setRem(e.target.value / 16);
}}

Answer 2

这只是调用状态设置器时的一个小错误。您正在调用 setPixel 正常，但未调用 setRem。这是人们（包括我自己！）常犯的错误。

例如，我无法告诉你我写过多少次像这样的 if 语句：

if (typeof value === 'string' && value2 === 'number') ...

忘记使用 && 运算符并不意味着您不必重新声明要执行的操作。

上面的代码片段当然应该是：

if (typeof value === 'string' && typeof value2 === 'number') ...

所以对于你来说，你只需要将你的 setter 包装在一个函数调用中：

onChange={(e) => {
  setPixel(e.target.value);
  setRem(e.target.value / 16);
}}

你应该准备好了！

为什么 rem 的值没有变化？

Why isn't the value of rem changing?

javascript

pixel

event-handling

reactjs

use-state