[英]React JS: Uncaught TypeError: getState is not a function
I'm trying to create a simple API call to the server.我正在尝试为服务器创建一个简单的 API 调用。 To make it I have created a file named -
likes.js
, inside it I have:为此,我创建了一个名为 -
likes.js
的文件,在其中我有:
import axios from 'axios';
import tokenConfig from './auth';
// Like Report
export const likePostas = (report_public_id) => (dispatch, getState) => {
console.log('Trying to call the server')
axios
.post(`/api/report/like?report=${report_public_id}`, tokenConfig(getState))
.then((res) => {
console.log(res.data)
})
.catch(err => {
console.log(err.response.data)
});
};
So basically it should be working, the other thing is that I need to pass in the token to the headers, so I have another file for that which is auth.js
所以基本上它应该可以工作,另一件事是我需要将令牌传递给标头,所以我有另一个文件
auth.js
// Setup config with token - helper function
export const tokenConfig = (getState) => {
// Get token from state
const token = getState().auth.token;
// Headers
const config = {
headers: {
'Content-Type': 'application/json',
},
};
// If token, add to headers config
if (token) {
config.headers['Authorization'] = `Token ${token}`;
}
return config;
};
export default tokenConfig;
Now I need to just call it by pressing a button inside JSX.现在我只需要通过按下 JSX 中的一个按钮来调用它。 Here's my code:
这是我的代码:
import React, { useEffect, useState } from "react";
import { Button } from "../ButtonElement";
import { likePostas } from "../actions/likes";
const ReportCards = ({ report }) => {
const IsVerifiedDiv = (
<IsVerified>
<GoVerified />
<IsVerifiedToolTip>
This user is <span style={{ color: "#01BF71" }}>Verified</span>
</IsVerifiedToolTip>
</IsVerified>
);
useEffect(() => {
// Update the document title using the browser API
document.title = `Winteka - View Report`;
window.scroll({
top: 0,
left: 0,
behavior: "smooth",
});
}, [0]);
return (
<>
<BtnWrap2 onClick={likePostas(report.public_id)} />
</>
);
};
export default ReportCards;
But as I press the button I get this error:但是当我按下按钮时,我收到了这个错误:
react-dom.development.js:327 Uncaught TypeError: getState is not a function
It seems that you are using react-redux
and redux-thunk
and likePostas
is an async action creator.似乎您正在使用
react-redux
和redux-thunk
而likePostas
是一个异步动作创建者。
Instead of calling likePostas
action creator yourself, you need to let react-redux
call it with the values for the two parameters that it takes, ie dispatch
and getState
.您需要让
react-redux
它所采用的两个参数的值(即dispatch
和getState
调用它,而不是自己调用likePostas
动作创建者。 Currently the problem is that as you are calling likePostas
action creator yourself, dispatch
and getState
are undefined because you never pass those arguments to the function returned by likePostas
.目前的问题是,当您自己调用
likePostas
动作创建者时, dispatch
和getState
是未定义的,因为您从未将这些参数传递给likePostas
返回的likePostas
。
Add an onClick
listener on BtnWrap2
that will dispatch likePostas
action creator.在
BtnWrap2
上添加一个onClick
侦听BtnWrap2
,它将调度likePostas
动作创建者。
Import the useDispatch
hook from the react-redux
package.从
react-redux
包中导入useDispatch
钩子。
import { useDispatch } from "react-redux";
then use this useDispatch
hook to dispatch the likePostas
action when the button is clicked.然后使用这个
useDispatch
钩子在单击按钮时调度likePostas
操作。
const dispatch = useDispatch();
const handleClick = (id) => {
dispatch(likePostas(id));
};
and add this handleClick
an a click listener on the BtnWrap2
component.并在
BtnWrap2
组件上添加这个handleClick
一个单击侦听器。
<BtnWrap2 onClick={() => handleClick(report.public_id)} />
I suggest that you visit the following links to learn how to use react-redux
and redux-thunk
:我建议您访问以下链接以了解如何使用
react-redux
和redux-thunk
:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.