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>
  )
}

我遇到的问题是，在呈现RecordList.js组件时，App.js中的初始数据获取没有足够快地返回。因此，在RecordList.js中，该位会引发错误，指出map不是函数或无法映射到未定义的位置：

{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（）

1 个答案: