React Redux - props.createMovie 不是函数

Question

我的第一个 React/Redux 项目有一个问题，解决它可能并不难，但我很困惑。我想我已经做了工作所需的一切，但似乎没有。所以，我有 HOC 组件PopupWindow.jsxconst 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;标头.jsxconst 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);添加电影.jsxconst AddMovie = ({show, handleClose}) => {    const [movie] = movies;    delete movie.id;

Answer 1

您可以通过函数createMovie仅为文件连接该函数。如果您还想在文件中使用- 您需要再次连接。Header.jsxmapDispatchToPropscreateMoviePopupWindow.jsx

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

    function mapDispatchToProps(dispatch) {

        return {

            createMovie: (movie) => dispatch(createMovie(movie))

        }

    }

    

    

    export default compose(connect(null, mapDispatchToProps),React.

    memo)(PopupWindow);

然后，您可以通过 props 发送函数createMoviefrom PopupWindowto Header ，并取消连接 in Header，但您可以保留Header代码不变。