试图从 Redux 存储返回一个数组，但返回一个空数组

Question

我正在尝试从 Redux 存储返回一个获取的数组，但返回一个空数组。顺便说一句，fetch 运行良好。我找不到错误

可能错误在减速器中，或者我只是在 { connect }

这里从tmdb取数据，返回数组

action.js

export function itemFetchMovies() {
    return function (dispatch) {
        return fetch(url, {method: 'GET'})
            .then(response => response.json())
            .then(data => {
                console.log(data);
                let movies = [];

                let currentCount = 1;
                function makeCounter() {
                    return function() {
                        return currentCount++;
                    };
                }

                let counter = makeCounter();
                for (let i = 0; i < data.results.length; i++) {
                    let image_url = "https://image.tmdb.org/t/p/w500" + data.results[i].poster_path;
                    movies.push({
                        key: {i},
                        number: counter(),
                        poster: <img
                            src={image_url}
                            alt="new"
                            style={{width: 50, height: 50}}
                        />,
                        title: data.results[i].original_title,
                        year: data.results[i].release_date
                    })
                }
                console.log(movies);
                dispatch(
                            {
                                type: 'ITEMS_FETCH_DATA_SUCCESS',
                                payload: movies
                            }
                        );
            });
    }
}

Redux reducer，只是想将初始状态交换为获取的数据

reducer.js

const initalState = {
    list: []
};


export function items(state = initalState, action) {
    switch (action.type) {
        case 'ITEMS_FETCH_DATA_SUCCESS':
            return {
                ...state,
                list: action.payload
            };

        default:
            return state ;
    }
}

在 componentDidMount 上通过状态调用我的 fetch 函数，使用 { connect } 连接 porps 并存储

App.js


class App extends React.Component {
    componentDidMount() {
        this.props.fetchMovie();
        console.log(this.props)
    }

    render() {
        return (
            <div>
            </div>
        );
    }
}


App.propTypes = {
    fetchMovie: PropTypes.func.isRequired,
    list: PropTypes.array.isRequired,
};


const mapStateToProps = (state) => {
    return {
        list: state.list,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        fetchMovie: () => dispatch(itemFetchMovies())
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(App)

index.js

const store = createStore(items, applyMiddleware(thunk));
console.log(store.getState());

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("root")
);

Answer 1

让我澄清一下，

问题：

connect 只比较数据的浅变化，表示 1 级深度变化。 在您的情况下，您正在更改连接无法获取的电影数组并且它不会重新呈现自身。

任何对象或数组的深度更改都不会触发重新渲染，因为 connect 不会知道对象/数组中的值已更改。

解决方案：

您需要添加 counter 变量，它只会在 reducer 中自增，然后作为道具进入 mapStateToProps，您不需要在其他任何地方使用它，只是为了让连接知道您已经更改了数组中的某些内容/对象。

在减速器中

这样返回

dispatch(
 {
  type: 'ITEMS_FETCH_DATA_SUCCESS',
  payload: movies,
  counter: state.counter++,
 }
);

在容器中

const mapStateToProps = (state) => {
    return {
        list: state.list,
        counter: state.counter,
    };
};

希望这能给您提供帮助和解决方案。