React error: setUsername is not a function

Question

我正在尝试在我的个人资料视图中构建一个 UpdateUserInfo 组件，其中包含一个将更新用户详细信息的表单。但是，当我将函数作为 props 传递并且表单不起作用时，我做错了什么。

这是我的简介-view.jsx

updateUserData(e) {
    e.preventDefault;
    axios.put(`https://flicking-through-flicks.herokuapp.com/users/${Username}`,
      {
        Username: this.state.Username,
        Password: this.state.Password,
        Email: this.state.Email,
        Birthday: this.state.Birthday
      },
      {
        headers: { Authorization: `Bearer ${token}` }
      })
      .then((response) =>{
        this.setState({
          Username: response.data.Username,
          Password: response.data.Password,
          Email: response.data.Email,
          Birthday: response.data.Birthday
        });

        localStorage.setItem('user', this.state.Username);
        alert('Profile update');
        window.open('/profile', '_self');
      }
      )
      .catch(function (error) {
        console.log(error)
      })
  };

setUsername(value) {
  props.setState({
    Username: value
  })
}

setPassword(value) {
  props.setState({
    Password: value
  })
}

setEmail(value) {
  props.setState({
    Email: value
  })
}

setBirthday(value) {
  props.setState({
    Birthday: value
  })
}

和

render () {

  const {Username, Email, FavoriteMovies, setBirthday, setEmail, setPassword, setUsername, updateUserData} = this.state;

  if(!Username) {
    return null;
  }

  return (
    <>
    <Container>
    <UserInfo username = {Username} email = {Email} />
    <FavMovies favoriteMovieList={FavoriteMovies} />
    <UpdateInfo setUsername={setUsername} setPassword={setPassword} setEmail={setEmail} setBirthday={setBirthday} updateUserData={updateUserData}/>
    <Row className="m-2 mx-auto"><Col><Button variant="danger" onClick={(e) => this.deleteUser(e)}>Delete your account</Button></Col></Row>
    </Container>
    </>
      
  )
}

这就是我的 UpdateInfo 组件中的内容：

function UpdateInfo({ setUsername, setPassword, setEmail, setBirthday, updateUserData }) {

    return (
        <>
        <Row className="m-2 mx-auto">
            <Col>
                <CardGroup>
                    <Card>
                        <Card.Body>
                            <Card.Title>Update your information:</Card.Title>
                            <Form>
                                <Form.Group controlId="formUsername">
                                    <Form.Label>Username:</Form.Label>
                                    <Form.Control
                                        type="text"
                                        name="Username"
                                        placeholder='Enter your desired username'
                                        onChange={e => setUsername(e)}                                      
                                    />
                                </Form.Group>
                                <Form.Group controlId="formPassword">
                                    <Form.Label>Password:</Form.Label>
                                    <Form.Control
                                        type="password"
                                        placeholder='Your password must be 8 or more characters long'
                                 
                                        onChange={e => setPassword(e)}     
                                        minLength={8}
                                        
                                    />

                                </Form.Group>
                                <Form.Group controlId="formEmail">
                                    <Form.Label>Email:</Form.Label>
                                    <Form.Control
                                        type="text"
                                  
                                        onChange={e => setEmail(e)}     
                                        placeholder='Enter your email address' />
                                </Form.Group>

                                <Form.Group controlId="updateBirthday">
                                    <Form.Label>Birthday:</Form.Label>
                                    <Form.Control
                                        type="date"
                                        name="birthday"

                                        onChange={e => setBirthday(e)}     
                                        />

                                </Form.Group>
                                <Button variant="primary" type="submit" onClick={updateUserData}>Update Info</Button>
                                
                            </Form>
                        </Card.Body>
                    </Card>
                </CardGroup>
            </Col>
        </Row>
        </>)
}

export default UpdateInfo;

但是当我尝试在表单中写入时出现错误。下面是用户名的例子，但它发生在所有用户身上。

VM562:47 Uncaught TypeError: setUsername is not a function
    at onChange (eval at hmrApply (runtime-0712856a3897c4e9.js:322:16), <anonymous>:47:68)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16)
    at invokeGuardedCallback (react-dom.development.js:4056:31)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070:25)
    at executeDispatch (react-dom.development.js:8243:3)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275:7)
    at processDispatchQueue (react-dom.development.js:8288:5)
    at dispatchEventsForPlugins (react-dom.development.js:8299:3)
    at react-dom.development.js:8508:12

我做错了什么？

感谢您的帮助！

Answer 1

您正在解构您的状态以获取您的设置方法，但它们不属于您的状态 (setBirthday, setEmail, setPassword, setUsername, updateUserData)。

它们是您 profile-view.jsx 的方法，因此当您将它们传递给子组件时，您应该 setUsername={this.setUsername}

React error: setUsername is not a function

React error: setUsername is not a function

jsx

reactjs