功能中的 JSX 不更新 state

Question

任何人都可以給出答案嗎？

當我單擊 getbtn -> placeRange 將 jsx 傳遞給 setbtn -> 時無法更新 state -> 然后在 Silde 范圍時無法更新 State。

import React, { useState } from "react";

export default function Stack() {
  const [value, setvalue] = useState(0);
  const [btn, setbtn] = useState(<></>);

  function placeRange() {
    const jsx = (
      <>
        <input
          type="range"
          onChange={(e) => {
            setvalue(e.target.value);
          }}
        />
        <h1>{value}</h1>
      </>
    );
    setbtn(jsx);
  }

  return (
    <>
      <button onClick={placeRange}>getrange</button>
      {btn}
    </>
  );
}

Answer 1

這似乎對我有用。

這是codeandbox的一個工作示例

 import { useState } from "react"; export default function App() { const [value, setvalue] = useState(0); const [btn, setbtn] = useState(<></>); function placeBtn() { const jsx = ( <> <button onClick={() => { setvalue(1); }} > Convert to 1 </button> </> ); setbtn(jsx); } return ( <> <h1>{value}</h1> <button onClick={placeBtn}>getbtn</button> {btn} </> ); }

Answer 2

不確定我是否完全理解您要達到的目標，這對我來說還不夠清楚。 從您的代碼看來，您似乎正在嘗試在單擊按鈕時設置輸入范圍，然后，您希望該范圍更新其下方的數字。

如果是這種情況，我建議以下解決方案：

import React, { useState } from "react";

export default function Stack() {
  const [value, setvalue] = useState(0);
  const [showRange, setShowRange] = useState(false);

  function placeRange() {
    setShowRange(!showRange);
  }

  return (
    <>
      <button onClick={placeRange}>getrange</button>
      {showRange && (
        <>
          <input
            type="range"
            onChange={(e) => {
              setvalue(e.target.value);
            }}
          />
          <h1>{value}</h1>
        </>
      )}
    </>
  );
}