Question

我对React很陌生。

我有两个功能组件，例如其中的父级和子级。我正在将props从父母那里传递给孩子。我传递的道具基本上是一个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>
    );
  }

子组件：

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;

我尝试在Child组件中使用useEffect将道具设置为状态，然后访问但没有运气。在React开发人员工具中，我可以看到道具具有所需的确切数据。知道我在做什么错吗？如果可以提供更多详细信息，请告诉我。

Answer 1

props.criterias在第一个渲染器上是null，因此您需要在null组件或CriteriaScores中注意ProjectStages。

尝试一下：

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

Answer 2

JUnit最初是projectStages。在数据到达之前，您可能不想渲染null，而是要渲染一些占位符：

<CriteriaScores />

Answer 3

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

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

然后您进行异步调用：

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

因此setProjectStages(response)将在“将来”的某个时间被称为，同时，您的组件已使用初始值null进行渲染，并且您尝试访问它。

要解决此问题，await进行异步调用或 ，正如大家所提到的，请保重或null

async function fetchMyAPI() {
  const respone = await ProjectAPI.getProjectStages(projectNumber);
  setProjectStages(response);
}

useEffect(() => {
  fetchMyAPI();
}, []);

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

3 个答案: