React如何从后端API为useState设置初始值？

问题原因 #

组件首次渲染时，settingsData初始值是空数组，此时settingsData?.data?.user_data?.public_key返回undefined，导致publicKey和secretKey的初始状态为undefined。而useState的初始值仅在组件首次渲染时生效，后续settingsData通过接口请求更新后，不会自动同步到这两个独立的状态中，因此输入框显示为空。

解决方案：监听settingsData变化同步状态 #

使用useEffect监听settingsData的更新，当接口返回数据后，手动将对应字段同步到输入框的状态中：

const [settingsData, setSettingsData] = useState([]);
const [settingsLoading, setSettingsLoading] = useState(true);
// 初始化空字符串，避免输入框显示undefined
const [publicKey, setPublicKey] = useState('');
const [secretKey, setSecretKey] = useState('');

useEffect(() => {
  if (isAuth) {
    apiClient
      .get("api/v1/page-data/settings")
      .then((response) => {
        setSettingsData(response.data);
        setSettingsLoading(false);
      })
      .catch((error) => console.error(error));
  }
}, []);

// 监听settingsData变化，同步输入框状态
useEffect(() => {
  // 确保数据存在再更新
  if (settingsData?.data?.user_data) {
    setPublicKey(settingsData.data.user_data.public_key || '');
    setSecretKey(settingsData.data.user_data.secret_key || '');
  }
}, [settingsData]);

输入框代码保持不变 #

<input
  value={publicKey}
  onChange={(e) => setPublicKey(e.target.value)}
  placeholder="PublicKey"
/>

<input
  value={secretKey}
  onChange={(e) => setSecretKey(e.target.value)}
  placeholder="SecretKey"
/>

补充说明 #

• 初始化输入框状态时用空字符串''代替undefined，可以避免输入框出现异常文本显示。
• 第二个useEffect的依赖数组加入settingsData，确保每次settingsData更新时都会触发状态同步。

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