reactjs - 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() 方法。如果我们可以在 passedData 完全解析之前停止 UI/或输入字段的呈现，这将允许 getAutofocus() 正确执行。

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

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>
         );
       }
    }