在一个餐厅评分管理项目中，在实现类组件方法到功能组件方法时遇到了一些错误

Question

RestaurantList.js

import React, { Component } from "react";
import { Table } from 'react-bootstrap';
import { Link } from 'react-router-dom'
export default class RestaurantList extends Component {
constructor() {
super();
this.state = {
list: null,
};
}
componentDidMount() {
fetch("http://localhost:3000/restaurant").then((response) => {
response.json().then((result) => {
this.setState({ list: result });
});
});
}
render() {
return (
<div>
<h1>List</h1>
{
this.state.list ?
<div>
<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Rating</th>
<th>City</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
{
this.state.list.map((item, i) =>
<tr>
<td>{item.id}</td>
<td>{item.name}</td>
<td>{item.email}</td>
<td>{item.rating}</td>
<td>{item.address}</td>
<td><Link to={"/update/" + item.id} style={{ color: 'blue', textDecoration: 'inherit' }}>Edit</Link></td>
</tr>)
}
</tbody>
</Table>
</div>
:
<p>Please Wait...</p>
}
</div>
);
}
}

RestaurantUpdate.js

类内组件方法(正确)

import React, { Component } from 'react';
import NavBarManu from './NavBarManu'
class RestaurantUpdate extends Component {
constructor()
{
super();
this.state = {
name: null,
email: null,
address: null,
rating: null,
id:null,
}
}
componentDidMount()
{ 
fetch('http://localhost:3000/restaurant/'+this.props.match.params.id).then((response) => {
response.json().then((result) => {
console.warn(result)
this.setState({ 
name:result.name,
email:result.email,
id:result.id,
rating:result.rating,
address:result.address
})
})
})
}
update()
{
fetch('http://localhost:3000/restaurant/'+this.state.id, {
method: "PUT",
headers:{
'Content-Type':'application/json'
},
body: JSON.stringify(this.state)
}).then((result)=>{
result.json().then((resp)=>{
alert("Restaurant has heen Update")
})
})
}
render() {

return (
<div>
<NavBarManu />
<h1>Restaurant Update</h1>
<div>
<input onChange={(event) => { this.setState({ name: event.target.value }) }}
placeholder="Restaurant Name" value={this.state.name} /> <br /><br />
<input onChange={(event) => { this.setState({ email: event.target.value }) }}
placeholder="Restaurant Email" value={this.state.email} /> <br /><br />
<input onChange={(event) => { this.setState({ rating: event.target.value }) }}
placeholder="Restaurant Rating"  value={this.state.rating}/> <br /><br />
<input onChange={(event) => { this.setState({ address:    event.target.value }) }}
placeholder="Restaurant Address"  value={this.state.address}/> <br       /><br />
<button onClick={() => { this.update() }}>Update Restaurant</button>
</div>
</div>
);
}
}
export default RestaurantUpdate;

在功能组件中(面临一些错误)

import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
const RestaurantUpdate = () => {
const [name, setName] = useState(null);
const [email, setEmail] = useState(null);
const [address, setAddress] = useState(null);
const [rating, setRating] = useState(null);
const [id, setId] = useState(null);

//Want to use it like CompoundDidMount
useEffect(() => {
fetch('http://localhost:3000/restaurant' / +id).then((response) => {
response.json().then((result) => {
console.warn(result)
setName(result.name);
setEmail(result.email);
setId(result.id);
setAddress(result.address);
setRating(result.rating);
})
})
}, []);
//Want to display all the states in the console with their respective values. But i am unable to do it.
useEffect(() => {
console.warn(name);
}, [id]);
return (
<div>
<h1>Update</h1>
<div>
<input onChange={(event) => { this.setState({ name: event.target.value }) }}
placeholder="Restaurant Name" /> <br /><br />
<input onChange={(event) => { this.setState({ email: event.target.value }) }}
placeholder="Restaurant Email" /> <br /><br />
<input onChange={(event) => { this.setState({ rating: event.target.value }) }}
placeholder="Restaurant Rating" /> <br /><br />
<input onChange={(event) => { this.setState({ address: event.target.value }) }}
placeholder="Restaurant Address" /> <br /><br />
<button onClick={() => { this.update() }}>Update Restaurant</button>
</div>
</div>
);
};
export default RestaurantUpdate;

我期望在控制台中显示所有状态及其各自的数据。但它显示的是空值。我在函数组件中使用钩子和在setState()中实现componentDidMount()时遇到了一些错误。基本上，我只想以功能组件的方式使用给定的类组件RestaurantUpdate.js。肯定有一些语法错误，我在实现它们时遇到了一些困难。因此，请指出错误并为我提供正确的解决方案。

区块报价

Answer 1

添加一个条件渲染，看看它是否有效。

import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
const RestaurantUpdate = () => {
const [name, setName] = useState(null);
const [email, setEmail] = useState(null);
const [address, setAddress] = useState(null);
const [rating, setRating] = useState(null);
const [id, setId] = useState(null);
const [result, setResult] = useState(null);

//Want to use it like CompoundDidMount
useEffect(() => {
fetch('http://localhost:3000/restaurant' / +id).then((response) => {
response.json().then((result) => {
console.warn(result)
setResult(result);
setName(result.name);
setEmail(result.email);
setId(result.id);
setAddress(result.address);
setRating(result.rating);
})
})
}, []);
//Want to display all the states in the console with their respective values. But i am unable to do it.
useEffect(() => {
console.warn(name);
}, [id]);
return (
<>
{
result ? (
<div>
<h1>Update</h1>
<div>
<input onChange={(event) => { setName(event.target.value) }} value={name}
placeholder="Restaurant Name" /> <br /><br />
<input onChange={(event) => { setEmail(event.target.value) }} value={email}
placeholder="Restaurant Email" /> <br /><br />
<input onChange={(event) => { setRating(event.target.value) }} value={rating}
placeholder="Restaurant Rating" /> <br /><br />
<input onChange={(event) => { setAddress(event.target.value) }} value={address}
placeholder="Restaurant Address" /> <br /><br />
<button onClick={() => { update() }}>Update Restaurant</button>
</div>
</div>
) : (<div>loading</div>)
}
</>

);
};
export default RestaurantUpdate;

Answer 2

这里有一些事情需要解决，这些事情可能会帮助您实现所需的结果。

首先是id，可能它应该来自对useParams的调用，对吧？如果是，则无需将其声明为一个州。

const { id } = useParams();

然后，在useEffect中，即使要模拟compoundDidMount，建议的解决方案是在deps数组中包括useEffect内部使用的所有值。这个链接挂钩文档非常有用。

接下来，您可能在console中收到一些警告，抱怨"value" prop on "input" should not be null和A component is changing an uncontrolled input to be controlled，只需为不同于null或undefined的输入设置一个初始状态就可以避免这种情况，这可能是：

const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [address, setAddress] = useState("");
const [rating, setRating] = useState(0);

或者也可以使用前面答案中显示的技术来帮助您从这些警告中删除。

同样在您的示例中，inputs中缺少value字段

<input 
onChange={(event) => setName(event.target.value)} 
placeholder="Restaurant Name" 
value={name} /> 

我想通过这些调整你应该会没事的。我制作了一个沙盒，可以帮助你展开一切。示例