如何使用 useEffect 挂钩中设置的另一个状态的值设置 useState 的初始值？答案

【问题标题】：How to set the initial value of useState with the value of another state set in a useEffect hook?如何使用 useEffect 挂钩中设置的另一个状态的值设置 useState 的初始值？
【发布时间】：2021-12-30 20:01:50
【问题描述】：

我在 useEffect 挂钩中从 Firestore 获取用户数据，然后将数据置于某个状态。这部分工作正常。

const [profile, setProfile] = useState("")

useEffect(() => {
// Get user profile data from firestore.. 
    setProfile(userData) 
}, [])

我有 HTML 单选输入，用户可以在其中更改其性别，但我需要使用状态设置初始性别（他们在注册时选择的性别）。

const defaultGender = profile.gender
const [gender, setGender] = useState(defaultGender)

<input onChange={e => setGender(e.target.value)} type="radio" id="Man" name="gender" value="Man" checked={defaultGender === "Man"} /> <label htmlFor="Man">Man</label>

<input onChange={e => setGender(e.target.value)} type="radio" id="Woman" name="gender" value="Woman" checked={defaultGender === "Woman"} /> 
<label htmlFor="Woman">Woman</label>

问题是，使用此代码，console.log(gender) 返回undefined，我无法检查（选择）不同的性别，因为它卡在 Man 上。

【问题讨论】：

标签： javascript reactjs react-hooks use-effect use-state

【解决方案1】：

看来你只需要：

使用状态中的gender（不是defaultGender）作为checked 输入的属性。
在profile 状态更新后更新您的gender 状态。

CodePen

const { useState, useEffect, Fragment } = React;

const Form = () => {
  const [profile, setProfile] = useState({});
  const [gender, setGender] = useState(profile.gender);

  useEffect(() => {
    // Assuming you have an async request here...
    const profile = { gender: "Woman" };
    setProfile(profile);
    setGender(profile.gender);
  }, []);

  return (
    <Fragment>
      <input
        onChange={(e) => setGender(e.target.value)}
        type="radio"
        id="Man"
        name="gender"
        value="Man"
        checked={gender === "Man"}
      />
      <label htmlFor="Man">Man</label>
      <input
        onChange={(e) => setGender(e.target.value)}
        type="radio"
        id="Woman"
        name="gender"
        value="Woman"
        checked={gender === "Woman"}
      />
      <label htmlFor="Woman">Woman</label>
    </Fragment>
  );
};

ReactDOM.render(<Form />, document.body);

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

【讨论】：