在 react-redux useSelector() 中获取 axios 数据后，状态更改不会重新呈现组件

Question

我正在尝试使用 React 和 Redux 在应用程序的初始加载时获取和显示数据。但是应该显示数据的组件在渲染时没有数据。它最终获取数据但由于某种原因没有重新呈现。

这是我的两个有问题的组件：

App.js

import React, {useEffect} from 'react';
import './App.css';
import RecordList from './components/RecordList';
import CreateRecord from './components/CreateRecord';
import {useDispatch} from 'react-redux';
import { initRecords } from './actions/recordActions';

function App() {
  const dispatch = useDispatch();

  // Gets initial record list.
  useEffect(() => {
    dispatch(initRecords());
  }, [dispatch])
  return (
    <div className="App">
      <CreateRecord />
      <RecordList/>
    </div>
  );
}

export default App;

RecordList.js

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'


export default function RecordList() {
  const dispatch = useDispatch();
  const records = useSelector(state=>state);
  console.log('state: ', records)
  return (
    <div>
      <h3>Albums</h3>
      {records.map(record =>
        <div key={record.id}>
          {record.albumName} by {record.artist}
        </div>
      )}
    </div>
  )
}

我遇到的问题是 App.js 中的初始数据获取在呈现 RecordList.js 组件时返回的速度不够快。所以在 RecordList.js 这个位抛出一个错误说 map 不是一个函数或者不能映射到 undefined:

{records.map(record =>
        <div key={record.id}>
          {record.albumName} by {record.artist}
        </div>
      )}

如果您注释掉抛出错误的 JSX，组件最终会获取数据。最初它将记录记录为未定义，但一秒钟后它用正确的值记录它。

这是我的减速器和动作： recordActions.js

import recordService from '../services/records';

export const initRecords = () => {
  return async dispatch => {
    const records = await recordService.getAll();
    console.log('from actions: ', records);
    dispatch({
      type: 'INIT_RECORDS',
      data: records
    })
  };
}

减速机

const recordReducer = (state = [], action) => {
  console.log('state now: ', state)
  console.log('action', action)
  switch(action.type) {
    case 'CREATE':
      return [...state, action.data];
    case 'INIT_RECORDS':
      return action.data;
    default: return state;
  }
}

export default recordReducer

最后，这是我进行 axios 调用的地方：

服务

const getAll = async () => {
  const response = await axios.get('someapi.com/records');
  return response.data;
}

我尝试有条件地渲染整个 recordsList 组件和 records.map 但条件只检查一次在第一次加载时不再检查。

根据我的理解，useSelector() 应该在状态发生变化时重新渲染组件，是否可能状态只是发生了变化而没有发生变化，我该如何解决这个问题？

Answer 1

想通了！结果 useSelector(state=>state) 我需要将其更改为 useSelector(state=>state.records.Items) 才能到达数组。

在 react-redux useSelector() 中获取 axios 数据后，状态更改不会重新呈现组件

State change isn't re-rendering component after axios data fetch in react-redux useSelector()

javascript

reactjs

redux

redux-thunk

react-redux