reactjs - React-Redux 产生 TypeError 无法读取未定义的属性
问题描述
我有一个 JSX 元素,我正在使用来自后端服务器的 JSON 数据进行渲染。我正在使用 Redux 来管理我的状态。我对我的状态进行 find 调用并按 ID 匹配 JSON 对象。然后我尝试使用点表示法从该对象中提取一个值,但我得到一个 TypeError 未定义的响应。这是我的 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);
我得到未定义的 TypeError
这是我的完整代码:
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
});
}
};
先感谢您。
解决方案
fundingSources
初始化为空。您正试图在 API 调用返回之前找到一个元素。
关于您的控制台日志:undefined
您发布的裁剪屏幕截图上方可能有一个。