React Redux-props.createMovie不是一个函数

Question

我的第一个React/Redux项目有一个问题，解决它可能并不难，但我很困惑。我想我做了工作所需要的一切，但似乎没有。

因此，我有HOC组件PopupWindow.jsx

const PopupWindow = (WrappedComponent) => {
return function (props) {
const [show, setShow] = useState(false);
const handleClose = (value) => {
setShow(false);
if (value) {
props.createMovie(value);
}
}
const handleShow = () => setShow(true);
return (
<WrappedComponent show={show}
handleClose={handleClose}
handleShow={handleShow}
{...props}/>)
}
}
export default PopupWindow;

Header.jsx

const Header = ({handleShow, handleClose, show, createMovie}) => {
return (
<header className="img-blur-container header p-3">
<div className="container">
<div className="d-flex justify-content-between">
<Logo/>
<Button
className="header_add-movie text-uppercase f-size-18 px-4 py-2"
onClick={handleShow}
>+ Add movie</Button>
<AddMovie show={show} handleClose={handleClose}/>
</div>
<Search/>
</div>
</header>
)
}
function mapDispatchToProps(dispatch) {
return {
createMovie: (movie) => dispatch(createMovie(movie))
}
}

export default compose(connect(null, mapDispatchToProps),React.memo)(Header);

AddMovie.jsx

const AddMovie = ({show, handleClose}) => {
const [movie] = movies;
delete movie.id;

return (
<Modal show={show} onHide={handleClose} backdrop="static">
<Modal.Header closeButton>
<Modal.Title>Add movie</Modal.Title>
</Modal.Header>
<Modal.Body>
<MovieForm/>
</Modal.Body>
<Modal.Footer>
<Button type="reset" variant="outline-primary" size="lg">Reset</Button>
<Button variant="primary" onClick={() => handleClose(movie)} size="lg">Submit</Button>
</Modal.Footer>
</Modal>
)
}
export default React.memo(AddMovie);

我会这样扭曲：

const AddMovie = PopupWindow(Header)

结果，当我试图提交有关电影的信息时，它会给我一个错误：

Uncaught TypeError: props.createMovie is not a function
at handleClose (PopupWindow.jsx:35)
at onClick (AddMovie.jsx:42)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
at executeDispatch (react-dom.development.js:8243)
at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
at processDispatchQueue (react-dom.development.js:8288)
at dispatchEventsForPlugins (react-dom.development.js:8299)

而在Header.jsx中，它是一个函数

props
createMovie: ƒ createMovie() {}

动作创作者：

export const createMovieSuccess = (movie) => ({
type: ACTIONS.CREATE_MOVIE_SUCCESS,
payload: movie
});

export function createMovie(movie) {
return (dispatch) => {
fetch(MOVIES_API_PATH, {
method: 'POST',
body: JSON.stringify(movie),
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}})
.then((response) => response.json()
.then((movie) => dispatch(createMovieSuccess(movie))))
}
}

减速器：

const initialState = {
loading: false,
error: null,
data: null,
totalAmount: 0
};
function moviesReducer(state = initialState, action) {
switch (action.type) {
case ACTIONS.CREATE_MOVIE_SUCCESS: {
const movie = action.payload;
return {
...state,
totalAmount: ++state.totalAmount,
data: [movie, ...state.data]
}
}
default: return state;
}
}
export default moviesReducer;

我做错了什么？为什么？

Answer 1

您通过函数mapDispatchToProps连接仅用于Header.jsx文件的函数createMovie。如果您想在文件PopupWindow.jsx中也使用createMovie，则需要再次连接。

您必须将以下代码添加到文件PopupWindow.jsx的末尾：它将PopupWindow连接到redux存储。

function mapDispatchToProps(dispatch) {
return {
createMovie: (movie) => dispatch(createMovie(movie))
}
}


export default compose(connect(null, mapDispatchToProps),React.
memo)(PopupWindow);

然后，您可以通过props将函数createMovie从PopupWindow发送到Header，并在Header中取消连接，但您可以保留Header代码。