React - 如何在 useState 中从后端 API 获取初始值？

Question

我在 useEffect 中发送了一些设置数据：

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

并使用来自后端的数据为两个键输入创建 useStates：

const [publicKey, setPublicKey] = useState(
    settingsData?.data?.user_data?.public_key
  );
  const [secretKey, setSecretKey] = useState(
    settingsData?.data?.user_data?.secret_key
  );

有一个输入：

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

加载页面时，我只看到空输入，看起来 useState 在未定义时分配我的后端属性。 如果此挂钩在我的设置数据从后端加载之前初始化初始值，我如何将后端数据分配给 useState？

Answer 1

您的关键相关初始状态设置为undefined ，因为数据在创建时不可用。 有几种方法可以解决这个问题，这里有几个：

• 您可以在设置数据 object 的同时设置这些键相关值，而不是尝试导出它们

  const [settingsData, setSettingsData] = useState([]);
  const [settingsLoading, setSettingsLoading] = useState(true);
  const [publicKey, setPublicKey] = useState('');
  const [secretKey, setSecretKey] = useState('');
    
  useEffect(() => {
    if (isAuth) {
      apiClient
        .get("api/v1/page-data/settings")
        .then(({ data }) => {
          setSettingsData(data);
          setSettingsLoading(false);
          setPublicKey(data.user_data.public_key);
          setSecretKey(data.user_data.secret_key);
        })
        .catch((error) => console.error(error));
    }
  }, []);

• 一个不太理想的选择是使用另一个useEffect来更新你的关键远程状态

const [settingsData, setSettingsData] = useState([]);
const [publicKey, setPublicKey] = useState('');
const [secretKey, setSecretKey] = useState('');

useEffect(() => {
  if (settingsData) {
    setPublicKey(settingsData.user_data.public_key);
    setSecretKey(settingsData.user_data.secret_key);
  }
}, [settingsData]);

• 第三种选择是仅使从返回数据派生的输入的初始 state 并使用短路来管理该值

  const [settingsData, setSettingsData] = useState([]);
  const [settingsLoading, setSettingsLoading] = useState(true);
  const [publicKey, setPublicKey] = useState('');
  const [secretKey, setSecretKey] = useState('');

  const publicK = settingsData?.data?.user_data?.public_key;
  const secretK = settingsData?.data?.user_data?.secret_key;
    
  useEffect(() => {
    if (isAuth) {
      apiClient
        .get("api/v1/page-data/settings")
        .then(({ data }) => {
          setSettingsData(data);
          setSettingsLoading(false);
          setPublicKey(data.user_data.public_key);
          setSecretKey(data.user_data.secret_key);
        })
        .catch((error) => console.error(error));
    }
  }, []);

// inputs will start with the values from const but once you write anything
// in the input it will change to the managed value in state
<input
  value={publicKey || publicK}
  onChange={(e) => setPublicKey(e.target.value)}
  placeholder="PublicKey"
/>
  
<input
  value={secretKey || secretK}
  onChange={(e) => setSecretKey(e.target.value)}
  placeholder="SecretKey"
/>