我对 React 还很陌生。
我有两个功能组件,例如其中的父组件和子组件。我正在将一些 props
从父级传递给子级。我传递的 props 基本上是一个 JSON 数组。我可以将其记录在控制台中。当我尝试通过索引访问它时出现问题,但失败并出现错误:
Cannot read property '0' of null
下面是我的代码。我在注释行中提到了该错误。 父组件:
function ProjectStages(props) {
const [projectStages, setProjectStages] = React.useState(null);
let projectNumber = props.match.params.projectNumber;
useEffect(() => {
ProjectAPI.getProjectStages(projectNumber).then((response) => {
console.log(response[0]); //works fine
setProjectStages(response);
});
}, []);
return (
<div>
<CriteriaScores criterias={projectStages[0]}/> // this fails, Cannot read property '0' of null
<CriteriaScores criterias={projectStages}/> // this works
</div>
);
}
子组件:
function CriteriaScores(props) {
console.log(props.criterias); // this works
console.log(props.criterias[0]); // this fails, Cannot read property '0' of null
return (
//..
);
}
export default CriteriaScores;
我尝试在子组件中使用 useEffect
将 props 设置为 state,然后进行访问,但没有成功。我可以在 React 开发者工具中看到 props 具有我需要的确切数据。知道我做错了什么吗?如果我可以提供更多详细信息,请告诉我。
最佳答案
props.criterias
是 null
在第一次渲染时,所以你需要照顾 null
在你的CriteriaScores
组件或 ProjectStages
.
试试这个:
console.log(props.criterias && props.criterias[0])
关于javascript - 无法通过 props 传递/访问数组索引,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57451206/