REACT 在渲染 UI 之前等待 useEffect 完成

Question

interface MyValue {
    //interface declaration
}
    
export function MyComponent {   
    const [myvalue, setMyvalue] = useState<MyValue>()
    
    useEffect(() => {
       setMyvalue(passedData)
    }, [passedData])
    
    function getAutofocus() {
        // return true/false based on myvalue value
    }
        
    render() {
       return (
          <div>
             <input
                autofocus={getAutofocus()}
                ref={c => (this._input = c)}
             />
          </div>
         );
       }
    }
 }

passedData 作为 prop 从父级传递，并通过服务器 GET 调用填充到父级，这需要一些时间来解析。

问题 - getAutofocus() 在正确加载 passedData 之前呈现。

我的要求是等到 passedData 正确解析后再调用 getAutofocus() 方法。如果我们可以停止 UI/ 或输入字段的呈现，直到 passedData 完全解析，这将允许 getAutofocus()正确执行。

最好的方法是什么？这里可以用react suspense吗？

Answer 1

听起来条件渲染足以满足您的需求：

    render() {
       // if myvalue is not populated yet, do not render anything
       return !myvalue ? null : (
          <div>
             <input
                autofocus={getAutofocus()}
                ref={c => (this._input = c)}
             />
          </div>
         );
       }
    }

Answer 2

正确的做法是使用 ref

const MyCom = props => {

const inputRef = React.useRef();

React.useEffect(()=>{
  if (inputRef.current) {
     inputRef.current.focus();
}

},[inputRef]);

return (
          <div>
             <input
                ref={inputRef}
             />
          </div>
         );
}

仅删除渲染方法class 组件有渲染

REACT 在渲染 UI 之前等待 useEffect 完成

REACT wait for useEffect to complete before rendering the UI

reactjs

typescript

react-hooks

use-effect

react-component