React中如何将useState初始值设为API请求返回的Promise值

问题根源 #

useState 接收的初始值仅在组件首次挂载时执行一次赋值。接口请求是异步逻辑，组件首次渲染时data还未返回、值为undefined，等后续接口响应更新data时，useState不会重新执行初始化逻辑，因此value无法自动拿到接口返回的内容。

可行实现方案 #

方案1：useEffect 监听数据变化同步状态（适配绝大多数场景）

初始化状态时给空字符串兜底，避免React抛出非受控/受控组件切换的警告，等接口返回数据后通过副作用同步值到本地状态：

// 初始值传空字符串，不要传undefined
const [value, setValue] = useState('');

useEffect(() => {
  // 按需加判断：如果不希望覆盖用户已经输入的内容，就增加!value的判断条件
  // 如果是切换数据源需要重置内容，直接判断data存在就赋值即可
  if (data?.content) {
    setValue(data.content);
  }
}, [data]);

对应textarea代码调整兜底逻辑即可：

<textarea
  className="noteText"
  value={value}
  onChange={(e) => {
    setValue(e.target.value);
  }}
/>

方案2：增加加载态，数据就绪后再渲染组件

如果加载阶段不需要展示输入框，可以等接口完全返回后再挂载textarea组件，此时useState初始化就能拿到正确的接口值：

// isLoading为接口请求的加载状态，初始值为true
if (isLoading) {
  return <div className="loading">内容加载中...</div>
}

// 代码走到这里时data已经有值，初始化可以直接拿到content
const [value, setValue] = useState(data.content);

return (
  <textarea
    className="noteText"
    value={value}
    onChange={(e) => setValue(e.target.value)}
  />
)

注意事项 #

• textarea的value属性始终要传字符串类型，不要传undefined/null，否则会触发React的组件类型警告。
• 不要直接把value绑定为data?.content、在onChange里直接修改接口返回的原数据，会破坏单向数据流，导致不可预期的重渲染问题。

内容的提问来源于stack exchange，提问作者crayonne