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;

标头.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);

添加电影.jsx

const AddMovie = ({show, handleClose}) => {

    const [movie] = movies;

    delete movie.id;

Answer 1

您可以通过函数createMovie仅为文件连接该函数。如果您还想在文件中使用- 您需要再次连接。Header.jsxmapDispatchToPropscreateMoviePopupWindow.jsx您必须将此代码添加到文件末尾 PopupWindow.jsx：它将 PopupWindow 连接到 redux 存储。&nbsp; &nbsp; function mapDispatchToProps(dispatch) {&nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; createMovie: (movie) => dispatch(createMovie(movie))&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; export default compose(connect(null, mapDispatchToProps),React.&nbsp; &nbsp; memo)(PopupWindow);然后，您可以通过 props 发送函数createMoviefrom PopupWindowto Header ，并取消连接 in Header，但您可以保留Header代码不变。