React错误:setUsername不是函数

Question

我正试图在我的概要文件视图中构建一个UpdateUserInfo组件，该组件包含一个将更新用户详细信息的表单。然而，当我将函数作为道具传递而表单不起作用时，我做了一些错误的事情。

这是我在profile-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}

Answer 2

我有这样的东西。在销毁过程中更换支架有帮助。const[Username，Email，FavoriteMovies，setBirthday，setEmail，setPassword，setUsername，updateUserData]=this.state；