我正在嘗試在 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;
uj5u.com熱心網友回復：
setState()作為一個二傳手不會回傳任何東西。由于它不回傳任何內容，因此setPixel(e.target.value)評估為undefined，因此之后的部分&&不會運行。這就是&&（邏輯與）的作業原理。
邏輯與 (&&) 從左到右計算運算元，立即回傳它遇到的第一個假運算元的值；如果所有值都為真，則回傳最后一個運算元的值。
你可以這樣做：
onChange={(e) => {
setPixel(e.target.value);
setRem(e.target.value / 16);
}}
uj5u.com熱心網友回復：
呼叫你的狀態設定器只是一個小錯誤。你打電話setPixel很好，但setRem沒有被打電話。這是人們常犯的錯誤（包括我自己！）。
例如，我無法告訴你我寫了多少次 if 陳述句，例如：
if (typeof value === 'string' && value2 === 'number') ...
忘記使用&&運算子并不意味著您不必重新宣告您想要做什么。
上面的代碼片段當然應該是：
if (typeof value === 'string' && typeof value2 === 'number') ...
所以對你來說，你只需要將你的設定器包裝在一個函式呼叫中：
onChange={(e) => {
setPixel(e.target.value);
setRem(e.target.value / 16);
}}
你應該準備好了！
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/419525.html
標籤：