我刚刚开始使用 React 钩子，想知道 AJAX 请求应该是什么样子？
我已经尝试了很多尝试，但无法让它发挥作用，也并不真正知道实现它的最佳方法。以下是我的最新尝试：
import React, { useState, useEffect } from 'react';
const App = () => {
const URL = 'http://api.com';
const [data, setData] = useState({});
useEffect(() => {
const resp = fetch(URL).then(res => {
console.log(res)
});
});
return (
<div>
// display content here
</div>
)
}
您可以创建一个名为的自定义钩子useFetch来实现该useEffect钩子。
通过将空数组作为第二个参数传递给useEffect钩子将触发请求componentDidMount。
请参阅下面的代码。
import React, { useState, useEffect } from 'react';
const useFetch = (url) => {
const [data, setData] = useState(null);
// empty array as second argument equivalent to componentDidMount
useEffect(() => {
async function fetchData() {
const response = await fetch(url);
const json = await response.json();
setData(json);
}
fetchData();
}, [url]);
return data;
};
const App = () => {
const URL = 'http://www.example.json';
const result = useFetch(URL);
return (
<div>
{JSON.stringify(result)}
</div>
);
}
工作得很好......给你：
import React, { useState, useEffect } from 'react';
const useFetch = url => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const fetchUser = async () => {
const response = await fetch(url);
const data = await response.json();
const [user] = data.results;
setData(user);
setLoading(false);
};
useEffect(() => {
fetchUser();
}, []);
return { data, loading };
};
const App = () => {
const { data, loading } = useFetch('https://api.randomuser.me/');
return (
<div className="App">
{loading ? (
<div>Loading...</div>
) : (
<React.Fragment>
<div className="name">
{data.name.first} {data.name.last}
</div>
<img className="cropper" src={data.picture.large} alt="avatar" />
</React.Fragment>
)}
</div>
);
};
现场演示：
根据版本更改更新（感谢@mgol 在评论中引起我的注意）。
到目前为止，答案很好，但是当您想要触发请求时，我会添加一个自定义挂钩，因为您也可以这样做。
function useTriggerableEndpoint(fn) {
const [res, setRes] = useState({ data: null, error: null, loading: null });
const [req, setReq] = useState();
useEffect(
async () => {
if (!req) return;
try {
setRes({ data: null, error: null, loading: true });
const { data } = await axios(req);
setRes({ data, error: null, loading: false });
} catch (error) {
setRes({ data: null, error, loading: false });
}
},
[req]
);
return [res, (...args) => setReq(fn(...args))];
}
如果您愿意，您可以使用此钩子为特定 API 方法创建一个函数，但请注意，此抽象不是严格要求的，并且可能非常危险（带有钩子的松散函数不是一个好主意，以防万一在 React 组件函数的上下文之外使用）。
const todosApi = "https://jsonplaceholder.typicode.com/todos";
function postTodoEndpoint() {
return useTriggerableEndpoint(data => ({
url: todosApi,
method: "POST",
data
}));
}
最后，从您的功能组件中
const [newTodo, postNewTodo] = postTodoEndpoint();
function createTodo(title, body, userId) {
postNewTodo({
title,
body,
userId
});
}
然后只需指向createTodo一个onSubmit或onClick处理程序。newTodo将有您的数据、加载和错误状态。沙盒代码就在这里。
use-http是一个有点反应的 useFetch 钩子，使用如下：https ://use-http.com
import useFetch from 'use-http'
function Todos() {
const [todos, setTodos] = useState([])
const { request, response } = useFetch('https://example.com')
// componentDidMount
useEffect(() => { initializeTodos() }, [])
async function initializeTodos() {
const initialTodos = await request.get('/todos')
if (response.ok) setTodos(initialTodos)
}
async function addTodo() {
const newTodo = await request.post('/todos', {
title: 'no way',
})
if (response.ok) setTodos([...todos, newTodo])
}
return (
<>
<button onClick={addTodo}>Add Todo</button>
{request.error && 'Error!'}
{request.loading && 'Loading...'}
{todos.map(todo => (
<div key={todo.id}>{todo.title}</div>
)}
</>
)
}
或者，如果你不想自己管理状态，你可以做
function Todos() {
// the dependency array at the end means `onMount` (GET by default)
const { loading, error, data } = useFetch('/todos', [])
return (
<>
{error && 'Error!'}
{loading && 'Loading...'}
{data && data.map(todo => (
<div key={todo.id}>{todo.title}</div>
)}
</>
)
}
我建议您使用react-request-hook，因为它涵盖了很多用例（同时多个请求，卸载和托管请求状态的可取消请求）。它是用 typescript 编写的，因此如果您的项目也使用 typescript，则可以利用这一点，如果不使用，则取决于您的 IDE，您可能会看到类型提示，并且该库还提供了一些帮助程序以允许您安全地键入您期望作为请求结果的有效负载。
它经过了很好的测试（100% 的代码覆盖率），您可以像这样简单地使用它：
function UserProfile(props) {
const [user, getUser] = useResource((id) => {
url: `/user/${id}`,
method: 'GET'
})
useEffect(() => getUser(props.userId), []);
if (user.isLoading) return <Spinner />;
return (
<User
name={user.data.name}
age={user.data.age}
email={user.data.email}
>
)
}
作者免责声明：我们一直在生产中使用此实现。有很多钩子可以处理 Promise，但也有一些边缘情况没有被覆盖或没有实现足够的测试。react-request-hook 甚至在正式发布之前就已经过实战测试。它的主要目标是在我们处理应用程序最关键的方面之一时经过良好测试和安全使用。
componentDidMount传统上，您会在类组件的生命周期中编写 Ajax 调用，并setState在请求返回时显示返回的数据。
使用钩子，您将使用useEffect并传入一个空数组作为第二个参数，以使回调在组件挂载时运行一次。
这是一个从 API 获取随机用户配置文件并呈现名称的示例。
function AjaxExample() {
const [user, setUser] = React.useState(null);
React.useEffect(() => {
fetch('https://randomuser.me/api/')
.then(results => results.json())
.then(data => {
setUser(data.results[0]);
});
}, []); // Pass empty array to only run once on mount.
return <div>
{user ? user.name.first : 'Loading...'}
</div>;
}
ReactDOM.render(<AjaxExample/>, document.getElementById('app'));<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>useEffect我在上面的答案中发现了许多错误的用法。
不应将异步函数传递给useEffect.
让我们看看签名useEffect：
useEffect(didUpdate, inputs);
您可以在函数中执行副作用didUpdate，并返回一个 dispose 函数。dispose 函数非常重要，您可以使用该函数取消请求、清除计时器等。
任何 async 函数都会返回一个 Promise，但不会返回一个函数，因此 dispose 函数实际上没有任何效果。
所以传入一个异步函数绝对可以处理你的副作用，但它是 Hooks API 的反模式。
这是我认为可行的方法：
import React, { useState, useEffect } from 'react';
const App = () => {
const URL = 'http://api.com';
const [data, setData] = useState({})
useEffect(function () {
const getData = async () => {
const resp = await fetch(URL);
const data = await resp.json();
setData(data);
}
getData();
}, []);
return (
<div>
{ data.something ? data.something : 'still loading' }
</div>
)
}
有几个重要的位：
useEffect充当 a componentDidMount，这意味着它可能会被执行多次。这就是为什么我们要添加一个空数组作为第二个参数，这意味着“这个效果没有依赖关系，所以只运行一次”。App即使数据尚未出现，您的组件仍会呈现某些内容。因此，您必须处理未加载数据但渲染组件的情况。顺便说一句，这没有任何变化。即使是现在，我们也在这样做。