如何在效果挂钩中使用axios

Question

基于类的组件：

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] useEffect 中的无限循环

[2] 如何使用React useEffect只调用一次加载函数

Answer 1

将一个空数组作为useEffect的第二个参数，以表明您只希望在初始渲染后运行一次效果。console.log(posts);显示空数组的原因是，posts变量仍然引用初始数组，而setPosts也是异步的，但如果在渲染中使用，它仍然可以按您的意愿工作。

示例

const { useState, useEffect } = React;
function App() {
const [posts, setPosts] = useState([]);
useEffect(() => {
setTimeout(() => {
setPosts([{ id: 0, content: "foo" }, { id: 1, content: "bar" }]);
console.log(posts);
}, 1000);
}, []);
return (
<div>{posts.map(post => <div key={post.id}>{post.content}</div>)}</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

您可以检查axios钩子是如何实现的。

它非常简单，使用您提供的配置对象(或url(来决定何时发出请求，何时不发出请求，正如Tholle的回答中所解释的那样。

除了允许您在无状态功能组件中使用令人敬畏的axios外，它还支持服务器端渲染，事实证明，钩子的实现非常简单。

免责声明：我是那个包裹的作者。

Answer 3

我为Axios.js.编写了一个自定义挂钩

这里有一个例子：

import React, { useState } from 'react';
import useAxios from '@use-hooks/axios';
export default function App() {
const [gender, setGender] = useState('');
const {
response,
loading,
error,
query,
} = useAxios({
url: `https://randomuser.me/api/${gender === 'unknow' ? 'unknow' : ''}`,
method: 'GET',
options: {
params: { gender },
},
trigger: gender,
filter: () => !!gender,
});
const { data } = response || {};
const options = [
{ gender: 'female', title: 'Female' },
{ gender: 'male', title: 'Male' },
{ gender: 'unknow', title: 'Unknow' },
];
if (loading) return 'loading...';
return (
<div>
<h2>DEMO of <span style={{ color: '#F44336' }}>@use-hooks/axios</span></h2>
{options.map(item => (
<div key={item.gender}>
<input
type="radio"
id={item.gender}
value={item.gender}
checked={gender === item.gender}
onChange={e => setGender(e.target.value)}
/>
{item.title}
</div>
))}
<button type="button" onClick={query}>Refresh</button>
<div>
{error ? error.message || 'error' : (
<textarea cols="100" rows="30" defaultValue={JSON.stringify(data || {}, '', 2)} />
)}
</div>
</div>
);
}

你可以在网上看到结果。