我无法在条件渲染上正确使用useEffect读取输入

Question

我正在尝试使用“静态”模式创建输入组件。在此模式下，输入将被包含输入值的范围替换。在这个问题中，我使用范围输入。import React from 'react';import ReactDOM from 'react-dom';const { useState, useEffect, } = React;const RangeInput = ({  inputID, min, max, defaultValue, children,}) => {  const [valueAfterStaticChange, setValueAfterStaticChange] = useState(    defaultValue  );  const [isStatic, setIsStatic] = useState(false);  useEffect(    () => () => {      // do this before component unmounts and when 'isStatic' changes,      // but only when 'isStatic' is true      isStatic        || setValueAfterStaticChange(document.getElementById(inputID).value);    },    [isStatic]  );  return (    <div>      <label htmlFor={inputID}>{children}</label>      <span style={{ display: isStatic || 'none', }}>        {valueAfterStaticChange}      </span>      <input        type="range"        min={min}        max={max}        defaultValue={valueAfterStaticChange}        id={inputID}        style={{ display: isStatic && 'none', }}      />      <button        onClick={() => {          setIsStatic(!isStatic);        }}      >        Toggle Static      </button>    </div>  );};ReactDOM.render(  <RangeInput inputID="myID" min={0} max={100} defaultValue={50}>    My Range Input  </RangeInput>,  document.getElementById('root'));上面的代码有效。但它display: none用来模拟'无渲染'。我以为我可以使用以下逻辑完成实际的卸载：// all unchanged until...    return (     <div>       <label htmlFor={inputID}>{children}</label>       {isStatic ? (         <span>{valueAfterStaticChange}</span>       ) : (         <input           type="range"           min={min}           max={max}           defaultValue={valueAfterStaticChange}           id={inputID}         />       )}       <button         onClick={() => {           setIsStatic(!isStatic);         }}       >         Toggle Static       </button>     </div>   );};不知怎的，我的useEffect返回函数在它实际卸载时不会正确读取输入。我认为使用return函数useEffect会导致函数在组件卸载之前运行。我究竟做错了什么？

Answer 1

除非在卸载时有理由获得该值，否则您可能只是在更改时跟踪该值。那样你根本不需要useEffect：

const RangeInput = ({ inputID, min, max, defaultValue, children }) => {
  const [value, setValue] = useState(defaultValue); // <-- keep track of value
  const [isStatic, setIsStatic] = useState(false);
  return (
    <div>
      <label htmlFor={inputID}>{children}</label>
      {isStatic ? (
        <span>{value}</span>
      ) : (
        <input
          type="range"
          min={min}
          max={max}
          defaultValue={value}
          onChange={e => setValue(e.target.value)} // <-- Set value onChange
          id={inputID}
        />
      )}
      <button
        onClick={() => {
          setIsStatic(!isStatic);
        }}
      >
        Toggle Static
      </button>
    </div>
  );};