在Redux中为react.js编辑状态

时间:2018-10-23 14:36:54

标签: reactjs redux

我的应用程序中有这样的错误

  1 of 6 errors on the page
Error: Cannot find module '../images/Kingsglaive_Final_Fantasy_XV.jpg'

所以我认为问题在于我像这样忘记了文件中的另外两个点:

'../../images/Kingsglaive_Final_Fantasy_XV.jpg'

因为我的文件结构是这样的:

react js file structure

现在,我想编辑我的简化器,因为该代码位于MovieList-reducer.js中。只需在imgUrl中放置两个点:

const reducer = () => {
    return (
        [
            {
                "id": 100,
                "title": "Kingsglaive",
                "subtitle": "Final Fantasy XV",
                "description": "King Regis, who oversees the land of Lucis, commands his army of soldiers to protect the kingdom from the Niflheim empire's plans to steal the sacred crystal.",
                "year": 2016,
                "imageUrl": "../../images/Kingsglaive_Final_Fantasy_XV.jpg",
                "rating": 4.5
            },
            {
                "id": 200,
                "title": "Final Fantasy",
                "subtitle": "Spirits Within",
                "description": "A scientist makes a last stand on Earth with the help of a ragtag team of soldiers against an invasion of alien phantoms.",
                "year": 2001,
                "imageUrl": "../../images/Final_Fantasy_Spirits_Within.jpg",
                "rating": 4.5
            },
            {
                "id": 300,
                "title": "Ghost In The Shell",
                "subtitle": "Ghost In The Shell",
                "description": "A hacker known as the Puppet Master is hunted by a female cyborg cop and her partner. This film is a revised version of Ghost in the Shell (1995).",
                "year": 2008,
                "imageUrl": "../../images/Ghost_In_The_Shell_2_0.jpg",
                "rating": 5
            },
            {
                "id": 400,
                "title": "Appleseed Alpha",
                "subtitle": "Appleseed Alpha",
                "description": "A young female soldier Deunan and her cyborg partner Briareos survive through the post World War 3 apocalyptic New York in search of human's future hope, the legendary city of Olympus.",
                "year": 2014,
                "imageUrl": "../../images/Appleseed_Alpha.jpg",
                "rating": 3.8
            },
            {
                "id": 500,
                "title": "Resident Evil",
                "subtitle": "Vendetta",
                "description": "Chris Redfield enlists the help of Leon S. Kennedy and Rebecca Chambers to stop a death merchant, with a vengeance, from spreading a deadly virus in New York.",
                "year": 2014,
                "imageUrl": "../../images/Resident_Evil_Vendetta.jpg",
                "rating": 4.2
            }
        ]
    )
}

export default reducer;

但是当我编辑MovieList-reducer.js时,什么也没有发生,并且错误仍然存​​在。我还像添加标题一样编辑标题:“ Kingsglaive12321”,但它并没有反映在redux状态上。

我尝试查看redux devtools,但那里没有错。只是即使编辑了文件,我的编辑也没有改变。

我还尝试删除reducers文件,由于在刷新浏览器后redux存储中仍然存在状态,我感到震惊

为什么不更改?

编辑:

这是我在MovieCards.js中放的内容

    import React from 'react';

const MovieCard = (props) => {
    return (
        <div>
            <img src={require(props.movie.imageUrl)} alt="" />
            <h4>{props.movie.title}</h4>
            <h6>{props.movie.subtitle}</h6>
        </div>
    )
}

export default MovieCard

并在终端发出警告:严重依赖项:依赖项的请求是表达式

0 个答案:

没有答案