在React中尝试异步动作创建者时,避免使用绝对URL错误的方法是使用相对URL或者使用配置文件来管理URL。
以下是一个示例代码,演示如何使用相对URL和配置文件来避免使用绝对URL错误:
// 配置文件 config.js
const API_URL = process.env.NODE_ENV === 'production' ? '/api' : 'http://localhost:8000/api';
export default API_URL;
// 异步动作创建者 action.js
import API_URL from './config';
export function fetchData() {
return dispatch => {
dispatch({ type: 'FETCH_DATA_REQUEST' });
fetch(`${API_URL}/data`)
.then(response => response.json())
.then(data => dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data }))
.catch(error => dispatch({ type: 'FETCH_DATA_FAILURE', payload: error }));
};
}
// 组件 Component.js
import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { fetchData } from './action';
function Component() {
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchData());
}, [dispatch]);
return <div>Component</div>;
}
在上述示例中,配置文件config.js
定义了API的URL,根据不同环境加载不同的配置。异步动作创建者action.js
中使用了相对URL和配置文件中的URL来发送异步请求。组件Component.js
中使用了useEffect
钩子来触发异步动作创建者。通过这种方式,可以避免使用绝对URL错误,并且在不同环境下都能正确地访问API。
领取专属 10元无门槛券
手把手带您无忧上云