Question

我正在尝试从Redux存储返回获取的数组，但是返回一个空数组。顺便提一下，抓取效果很好。我找不到错误

错误可能出在减速器上，或者我只是在{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通过状态调用我的提取函数，使用{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

让我就此澄清一下，

问题：

仅比较数据的浅变化，意味着1级深度变化。在您的情况下，您正在更改无法连接的电影数组，并且它不会重新呈现。

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

解决方案：

您需要添加计数器变量，该变量仅在reducer中自身递增，并仅作为prop进入mapStateToProps，而无需在其他任何地方使用，只需让连接知道您已更改了数组/对象。

在减速器中

像这样返回

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

在容器

中

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

希望这会为您提供帮助和解决方案。

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

1 个答案: