Javascript 无法通过道具传递/访问数组索引

我还没有反应过来

我有两个功能组件，比如一个父组件和一个子组件。我正在把一些

道具从父母那里传给孩子。我传递的道具基本上是一个JSON数组。我可以把它记录在控制台上。当我尝试通过索引访问它时，出现了以下问题：错误：

无法读取null的属性“0”

下面是我的代码。我已经在评论行中提到了这个错误。
父组件：

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

我尝试在子组件中使用
useffect
将道具设置为state，然后访问，但没有成功。我可以在React开发者工具中看到，道具拥有我所需要的确切数据。知道我做错了什么吗？请告诉我是否可以提供更多详细信息。
道具。第一次渲染时，criterias
为
null
，因此您需要在
CriteriaScores
组件或
ProjectStages
中处理
null

试试这个：

console.log(props.criterias && props.criterias[0])

props.criterias
在第一次渲染时为
null
，因此您需要在
CriteriaScores
组件或
ProjectStages
中处理
null

试试这个：

console.log(props.criterias && props.criterias[0])

projectStages
最初将为
null
。在数据到达之前，您可能不想呈现
，而是要呈现一些占位符：

 if(projectStages === null) 
   return <div> Loading Criterias ... </div>;

 return (
   <div> 
      <CriteriaScores criterias={projectStages} />
   </div>
  );

if（projectStages==null）
返回装载标准；
返回(
);
projectStages
最初将为
null
。在数据到达之前，您可能不想呈现
，而是要呈现一些占位符：

 if(projectStages === null) 
   return <div> Loading Criterias ... </div>;

 return (
   <div> 
      <CriteriaScores criterias={projectStages} />
   </div>
  );

if（projectStages==null）
返回装载标准；
返回(
);
首先，您将状态初始化为空：

const [projectStages, setProjectStages] = React.useState(null);

然后进行异步调用：

ProjectAPI.getProjectStages(projectNumber).then(response => {
  console.log(response[0]); //works fine
  setProjectStages(response);
})

因此，
setProjectStages（response）
将在“将来”调用，
同时，您的组件被呈现为初始值
null
，您试图访问它

要修复它，
等待
异步调用或大家提到的，小心或
null

首先，您使用null初始化了您的状态：

const [projectStages, setProjectStages] = React.useState(null);

然后进行异步调用：

ProjectAPI.getProjectStages(projectNumber).then(response => {
  console.log(response[0]); //works fine
  setProjectStages(response);
})

因此，
setProjectStages（response）
将在“将来”调用，
同时，您的组件被呈现为初始值
null
，您试图访问它

要修复它，
等待
异步调用或大家提到的，小心或
null