reactjs - 如何在功能性 React JS 组件中获取数据?
问题描述
我正在开发一个 React JS、Redux、GraphQL、TypeScript 应用程序。
而且我想知道如何调用从我的容器中通过 GraphQL 获取数据和更新状态的函数。
通过 GraphQL 加载数据的动作名称是appActions.getAppData();
但它会导致无限刷新循环,因为它会触发 (StatusActions.startAppLoading()); 它也会更新状态。
我想知道如何解决此问题或如何将 /Main/index.tsx 重写为类组件并从 componentDidMount() 调用 startAppLoading()。
先感谢您。
主要的.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createBrowserHistory } from 'history';
import { configureStore } from 'app/store';
import { Router } from 'react-router';
import { App } from './app';
// prepare store
const history = createBrowserHistory();
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<App />
</Router>
</Provider>,
document.getElementById('root')
);
应用程序/index.tsx
import React from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import { App as Main } from 'app/containers/Main';
import { hot } from 'react-hot-loader';
let currentContainer = Main;
export const App = hot(module)(() => (
<Switch>
<Route exact path="/" component={currentContainer} />
<Route path="*">
<Redirect to="https://google.com" />
</Route>
</Switch>
));
应用程序/容器/Main/index.tsx
import React from 'react';
import style from './style.css';
import { RouteComponentProps } from 'react-router';
import { useDispatch, useSelector } from 'react-redux';
import { useTodoActions } from 'app/actions';
import { useAppActions } from 'app/actions';
import { RootState } from 'app/reducers';
import { Header, TodoList, Footer } from 'app/components';
export namespace App {
export interface Props extends RouteComponentProps<void> {}
}
export const App = ({ history, location }: App.Props) => {
const dispatch = useDispatch();
const appActions = useAppActions(dispatch);
const { apps } = useSelector((state: RootState) => {
return {
apps: state.apps
};
});
appActions.getAppData();
return (
<div className={style.normal}>
<Header />
<TodoList appActions={appActions} apps={apps} />
<Footer />
</div>
);
};
应用程序/动作/apps.ts
export const getAppData = () => {
let appKey = 'interpegasus';
return (dispatch: Dispatch) => {
dispatch(StatusActions.startAppLoading());
debugger;
apolloClient
.query({
query: gql`
query getApp($appKey: String!) {
getApp(id: $appKey) {
id
name
domain
}
}
`,
variables: {
appKey: appKey
}
})
.then((result) => {
debugger;
if (result.data.apps.length > 0) {
dispatch(populateAppData(result.data.apps[0]));
}
dispatch(StatusActions.endAppLoading());
})
.catch((error) => {
dispatch(StatusActions.endAppLoading());
console.log({
error: error
});
});
};
};
解决方案
你应该像这样把你的appActions.getAppData()
内useEffect
钩
useEffect(()=>{
appActions.getAppData()
},[])
查看官方文档介绍 Hooks
推荐阅读
- php - 从 Wordpress 中的当前页面获取所有附件
- javascript - 如何在 iframe 中实现缓存?
- arrays - 在arduino中将字符串传递给uint8_t数组
- powershell - 使用 powershell 版本 2 查询 AD
- ruby - 当命令执行一些错误时,为什么我的 pry-byebug 包会提供如此多的输出?
- javascript - `exports.notEmpty` 是什么意思?
- java - 是否可以在没有源文件的情况下执行 java 代码?
- excel - 剪切形状(图像)并粘贴到具有自定义 ID 的另一张表中
- python - Python QP Optimizer 二次目标之和
- python - Django 发布请求数据输出为无