如何将 useState 的初始值设置为 useEffect 挂钩中设置的另一个状态的值？

Question

我在 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) returns undefined 并且我无法检查 (select) 不同的性别，因为它卡在 Man 上。

Answer 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>

如何将 useState 的初始值设置为 useEffect 挂钩中设置的另一个状态的值？

How to set the initial value of useState with the value of another state set in a useEffect hook?

javascript

reactjs

react-hooks

use-effect

use-state