javascript - 无法通过 props 传递/访问数组索引

Question

我对 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 具有我需要的确切数据。知道我做错了什么吗？如果我可以提供更多详细信息，请告诉我。

Answer 1

props.criterias是 null在第一次渲染时，所以你需要照顾 null在你的CriteriaScores组件或 ProjectStages .

试试这个:

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