请问在 react 中如何实时更新状态？-灵析社区

**组件的封装，个人经验，仅供参考** 1、封装组件就要考虑它的通用行，举个例子：比如封装一个 select 组件。  上边的封装是基于 [antd 4.x 版本中的组件](https://link.segmentfault.com/?enc=mfJoCyiqct1b2C7dKAALUg%3D%3D.eg2%2FYrywEzJ%2FkCAbDtLiYTVFje9OqGl6XnBgX3H47obwu7R7VWUKTBao2360%2BfInXNtL3WuFOfVQrhvTfGlwIQ%3D%3D) 封装的。 2、如果遇到业务需求需要根据业务场景进行再次封装 select，可使用这个封装后的进行三次业务需求的 select 组件封装。 **第二个问题** 1、第一个 useEffect 可以删掉。 2、initialContent 是作为 prop 传递给组件的，它在组件挂载时会被设置为初始值。然而，由于 setTextContent 是异步的（React 的状态更新是异步的），在组件首次渲染时，textContent 的值可能还没有被更新，这可能导致组件显示上一次的内容。 3、可以在组件挂载时立即设置 textContent 的值，而不是依赖于 useEffect 钩子。可以通过在组件的初始化阶段直接设置 textContent 。 type UserdetailProps = { onChange?: (event: React.ChangeEvent) => void value?: string } const Userdetail = (props: UserdetailProps) => { const { onChange,defaultValue } = props const [textContent, setTextContent] = useState(defaultValue); const onChangeValue = (event: React.ChangeEvent) => { const val = event.target.value; setTextContent(val) if(typeof onChange === 'function'){ onChange(val) } } // 在组件挂载时立即设置 defaultValue 的值 useEffect(() => { setTextContent(defaultValue || ''); }, []); // 空的依赖数组确保这个 effect 只运行一次 return ( ); }; export default Userdetail; 4、添加了一个 onChange 事件处理器来更新 textContent 的值，这样当用户在文本区域输入时，内容会实时更新。 5、添加了一个外部的 onChange，可以是组件更加通用，同时在外部也能拿到实时更新的值。 6、textContent 将立即被设置为 defaultValue 的值，从而避免了显示上一次内容的问题。同时，用户输入时内容也会正确更新。 **第一个问题。** 异步导致你不能第一时间拿到最新的 userinfo，最简单的方法加个 loading const userList = () => { if (isLoading) { // 如果数据还在加载，显示加载指示器 return Loading...; } const activedUsers = users.filter((user) => user.status === 1); if (activedUsers.length === 0) { return No user; } return ( // ...用户列表渲染代码保持不变 ); };