React-Redux 产生 TypeError 无法读取未定义的属性答案

【问题标题】：React-Redux produces TypeError cannot read property of undefinedReact-Redux 产生 TypeError 无法读取未定义的属性
【发布时间】：2021-03-01 04:18:23
【问题描述】：

我有一个 JSX 元素，我使用来自后端服务器的 JSON 数据进行渲染。我正在使用 Redux 来管理我的状态。我对我的状态进行 find 调用并按 ID 匹配 JSON 对象。然后我尝试使用点表示法从该对象中提取一个值，但我得到一个 TypeError undefined 响应。这是我的 find 和 console.log

const getFundSources = fundingSources.find(f => f._id === match.params.id);
  console.log(getFundSources);

输出如下：

但是，如果我将以下内容添加到我的 console.log：

 const getFundSources = fundingSources.find(f => f._id === match.params.id);
  console.log(getFundSources.fundingSourceName);

我得到未定义的类型错误

这是我的完整代码：

import React, { Fragment, useEffect, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useTable } from 'react-table';
import { Link } from 'react-router-dom';
import { Table } from 'react-bootstrap';
import Moment from 'react-moment';
import { fundingSourcesDetails } from '../actions/fundingSourceActions';
import { projectsDetails } from '../actions/projectActions';

import FundingSourceIdentifiers from '../components/FundingSourceIdentifiers';
import FundingSourceGoals from '../components/FundingSourceGoals';
import Button from '../components/Button';
import ProjectSummary from '../components/ProjectSummary';
import SectionHeader from '../components/SectionHeader';
import Loader from '../components/Loader';

const FundingSourceScreen = ({ match }) => {
  const dispatch = useDispatch();

  const fundingSourceDetails = useSelector(state => state.fundingSourceDetails);
  const { fundingSources } = fundingSourceDetails;

  const projectDetails = useSelector(state => state.projectDetails);
  const { projects } = projectDetails;

  const getFundSources = fundingSources.find(f => f._id === match.params.id);
  console.log(getFundSources.fundingSourceName);

  useEffect(() => {
    dispatch(fundingSourcesDetails());
    dispatch(projectsDetails());
  }, [dispatch]);

  return (
    <Fragment>
      <FundingSourceIdentifiers />
      <FundingSourceGoals />
      <SectionHeader sectionName={`Projects for `} />
      <Button buttonName='Add Project' />
      <Table striped>
        <thead>
          <tr>
            <td>
              <strong>Status</strong>
            </td>
            <td>
              <strong>Name</strong>
            </td>
            <td>
              <strong>Type</strong>
            </td>
            <td>
              <strong>Location</strong>
            </td>
          </tr>
        </thead>
        <tbody>{}</tbody>
      </Table>
    </Fragment>
  );
};

export default FundingSourceScreen;

连同我的减速器：

import {
  FUNDINGSOURCE_DETAIL_REQUEST,
  FUNDINGSOURCE_DETAIL_SUCCESS,
  FUNDINGSOURCE_DETAIL_FAIL
} from '../constants/fundingSourceConstants';

export const fundingSourceReducer = (
  state = { fundingSources: [] },
  action
) => {
  switch (action.type) {
    case FUNDINGSOURCE_DETAIL_REQUEST:
      return { loading: true, fundingSources: [] };
    case FUNDINGSOURCE_DETAIL_SUCCESS:
      return { loading: false, fundingSources: action.payload };
    case FUNDINGSOURCE_DETAIL_FAIL:
      return { loading: false, error: action.payload };
    default:
      return state;
  }
};

和我的行动：

import axios from 'axios';
import {
  FUNDINGSOURCE_DETAIL_REQUEST,
  FUNDINGSOURCE_DETAIL_SUCCESS,
  FUNDINGSOURCE_DETAIL_FAIL
} from '../constants/fundingSourceConstants';

export const fundingSourcesDetails = () => async dispatch => {
  try {
    dispatch({ type: FUNDINGSOURCE_DETAIL_REQUEST });

    const { data } = await axios.get('/api/fundingsources');
    dispatch({
      type: FUNDINGSOURCE_DETAIL_SUCCESS,
      payload: data
    });
  } catch (error) {
    dispatch({
      type: FUNDINGSOURCE_DETAIL_FAIL,
      payload:
        error.response && error.response.data.message
          ? error.response.data.message
          : error.message
    });
  }
};

提前谢谢你。

【问题讨论】：

标签： reactjs redux jsx

【解决方案1】：

fundingSources 被初始化为空。您正试图在 API 调用返回之前找到一个元素。

关于您的控制台日志：您发布的裁剪屏幕截图上方可能有一个undefined。

【讨论】：