Reactjs React-Redux生成TypeError无法读取未定义的属性

我有一个JSX元素，我使用来自后端服务器的JSON数据呈现它。我正在使用Redux管理我的状态。我对我的状态进行了一个find调用，并通过ID匹配JSON对象。然后我尝试使用点表示法从该对象中提取一个值，但我得到了一个TypeError undefined响应。这是我的find and 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 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
    });
  }
};

---

提前感谢。

资金来源

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

关于您的控制台日志：您发布的截图上方可能有一个

未定义的

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