javascript - 使用 axios 请求从服务器填充表单数据

Question

所以我试图用我的服务器中的数据填充一个表单。服务器返回就好了。所有字符串。我希望每个表单字段都填充数据库中的当前详细信息。

我尝试了以下方法：

• 在 useEffect 中设置每个状态函数，但这不允许我更改表单数据

• 设置默认值，但这仅适用于
  表单的一个实例，然后变回

  function Dashboard(props) {
      const { classes } = props;
  
      let user = firebase.getCurrentUser(); 
      let id = user.uid;
  
      const [profile, setProfileData] = useState(''); 
  
      useEffect( () => {
          axios.get('https://www.memento-wedding.com/user/' + id)
          .then(response => {
              setProfileData(response.data); 
          }) 
          console.log(profile.gender);
      }); 
  
      const [firstName, setFirstName] = useState('')
      const [lastName, setLastName] = useState('');
      const [date, setDate] = useState('');
      const [gender, setGender] = useState();
  
      return (
          <div className="form">
          <h1 className="white center">Welcome, {firebase.getCurrentUsername()}!</h1> 
          <h1 className="white center">Create a Profile</h1>
          <Form onSubmit={e => e.preventDefault() && false}>
              <Row form>
              <Label for="firstName" sm={3} className="white right">First Name</Label>
              <Col sm={6}>
                  <Input type="text" name="firstName" id="name" value={firstName} onChange={e=>setFirstName(e.target.value)}/>
              </Col>
              <Col sm={1}></Col>
              </Row>
              <br></br>
              <Row form>
              <Label for="firstName" sm={3} className="white right">Last Name</Label>
              <Col sm={6}>
                  <Input type="text" name="firstName" id="name" value={lastName} onChange={e=>setLastName(e.target.value)}/>
              </Col>
              <Col sm={1}></Col>
              </Row>
              <br></br>
              <Row form>
              <Label for="email" sm={3} className="white right">Email</Label>
              <Col sm={6}>
                  <Input type="email" name="email" id="email" disabled value={profile.email}/>
              </Col>
              </Row>
              <br></br>
              <Row form>
              <Label for="birthday" sm={3} className="white right">Birthday</Label>
              <Col sm={6}>
                  <Input type="date" name="date" id="date" value={date} onChange={e=>setDate(e.target.value)}/>
              </Col>
              </Row>
              <br></br>  
              <Row>
              <Label for="gender" sm={3} className="white right">Gender</Label>
              <Col md={5} sm={7}>
              <RadioButtons gender={gender} setGender={e=>setGender(e.target.value)} />
              </Col>
              </Row>
           </Form>
      )
  

  }

标签： javascriptreactjsformsaxios

Answer 1

请添加过滤条件[]

useEffect( () => {
    axios.get('https://www.memento-wedding.com/user/' + id)
    .then(response => {
        setProfileData(response.data); 
    }) 
    console.log(profile.gender);
},[]);