在基于类的组件中：
componentDidMount() {
axios.get('https://jsonplaceholder.typicode.com/posts').then((res) => {
this.setState({
posts: res.data.slice(0, 10)
});
console.log(posts);
})
}
我尝试了这个：
const [posts, setPosts] = useState([]);
useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/posts').then((res) => {
setPosts(res.data.slice(0, 10));
console.log(posts);
})
});
它创建了一个无限循环。如果我将[] / {}作为第二个参数[1] [2]传递，则它将阻止进一步的调用。但这也阻止了数组的更新。
[1]使用中的无限循环
我正在从这个频道学习React 。最近，我从这里偶然发现了React Hooks 。因此，我试图将基于类的组件转换为基于钩子的组件。这是我基于类的组件：
import React, { Component } from 'react';
class AddNinja extends Component {
state = {
name: null,
age: null,
skill: null,
}
handleChange = e => {
this.setState({
[e.target.id]: e.target.value,
})
}
handleSubmit = e => {
e.preventDefault();
this.props.addNinja(this.state);
}
render() {
return (
<div>
<form onSubmit={ this.handleSubmit }>
<label htmlFor="name">Name: </label>
<input type="text" id="name" onChange={ this.handleChange } />
<label htmlFor="age">Age: </label>
<input type="number" id="age" onChange={ this.handleChange } />
<label htmlFor="skill">Skill: </label> …