Javascript 通过点表示法遍历范围内JSON对象时获取React错误 render（）{ 返回(

{this.state.recipes[0].title}

//这是我认为应该有效的方法-参考图1 //{this.state.recipes[0]}

//这是在尝试随机的东西，看看会发生什么-参考图2 //{this.state.recipes.title}

//这是我在胡闹-参考图3 ) } 我试图遍历一些JSON，得到一些非常不可靠的响应。如果有人想查看JSON本身，可以访问

当运行第一个p标记时，我得到以下响应：

由于不确定它为什么说recipes[0]未定义，我再次运行它，第二个p标记soley未注释，我得到以下响应：

这个回答真的让我措手不及，因为它引用的键（nid、title等）就是我知道的对象中的键“标题”是我想要的

最后，我只尝试了第三个p标记，应用程序实际编译到该标记时没有错误，但p标记是空的

查看，它清楚地表明，该州正是我想要它的，而图2显示Recipes[0]具有我第一次尝试调用的键。我搜索过，谷歌搜索过，甚至把我自己的亲人当作橡皮狗来对待，但都没有用

---

我做错了什么？

当有数据和没有数据时，您可以这样做来处理状态

构造函数（道具）{
超级（道具）；
此.state={
食谱：[]
};
}
render（）{
返回(

{this.state.recipes&&this.state.recipes.length？{this.state.recipes[0]。标题}:{this.state.recipes}

)
}

---

当有数据和没有数据时，您可以这样做来处理状态

构造函数（道具）{
超级（道具）；
此.state={
食谱：[]
};
}
render（）{
返回(

{this.state.recipes&&this.state.recipes.length？{this.state.recipes[0]。标题}:{this.state.recipes}

)
}

---

第一个p标记中的错误告诉您具体发生了什么。访问“未定义”的属性将破坏javascript/react

您可能没有处于该状态的预期数据，要验证我所说的，只需在呈现中通过console.log（this.state）进行调试：

constructor(props) {
      super(props);

      this.state = {
        recipes: []
      };
    }


 render() {
             return (
                 <p>
                  {this.state.recipes && this.state.recipes.length ? {this.state.recipes[0].title} : {this.state.recipes}}       
                </p> 
             )
         }

这可能是因为您的状态由来自api的异步调用填充。在解析api的异步请求之前，将首先调用Render（这意味着您的状态中还没有..recipes[0]数据）

我猜您的组件中有以下内容：

render() {
  console.log(this.state); // probably has this.state.recipes empty array at first render
  ...

如果您有更新的react版本，我建议您使用可选链接，因为您感兴趣的属性嵌套得很深：

{this.state？.recipes？[0]？.title}

另一种有效但过于冗长的方法：

componentDidMount() {
  ThirdParty.fetchRecipes().then(data => {
     this.setState({ recipes: data.recipes }); // after setState react calls render again. This time your p tag should work.
  })
  ...

常量标题=
这个州&&
这个州的食谱&&
这个.state.recipes.length&&
this.state.recipes[0]。标题
? this.state.recipes[0]。标题
: "";
render（）{return（{title}
）}

第一个p标记中的错误告诉您具体发生了什么。访问“未定义”的属性将破坏javascript/react

您可能没有处于该状态的预期数据，要验证我所说的，只需在呈现中通过console.log（this.state）进行调试：

constructor(props) {
      super(props);

      this.state = {
        recipes: []
      };
    }


 render() {
             return (
                 <p>
                  {this.state.recipes && this.state.recipes.length ? {this.state.recipes[0].title} : {this.state.recipes}}       
                </p> 
             )
         }

这可能是因为您的状态由来自api的异步调用填充。在解析api的异步请求之前，将首先调用Render（这意味着您的状态中还没有..recipes[0]数据）

我猜您的组件中有以下内容：

render() {
  console.log(this.state); // probably has this.state.recipes empty array at first render
  ...

如果您有更新的react版本，我建议您使用可选链接，因为您感兴趣的属性嵌套得很深：

{this.state？.recipes？[0]？.title}

另一种有效但过于冗长的方法：

componentDidMount() {
  ThirdParty.fetchRecipes().then(data => {
     this.setState({ recipes: data.recipes }); // after setState react calls render again. This time your p tag should work.
  })
  ...

常量标题=
这个州&&
这个州的食谱&&
这个.state.recipes.length&&
this.state.recipes[0]。标题
? this.state.recipes[0]。标题
: "";
render（）{return（{title}
）}

我相信您正在异步获取JSON。在这种情况下，您应该考虑初始配方状态为空数组的边界情况。

运行第一个

p

标记时，由于JSON是异步获取的，因此最初

this.state.recipes

没有定义，因此会出现错误

运行第二个

p

标记时，在第一次渲染期间，

this.state.recipes

未定义，因此它在

p

标记内工作，但在获取JSON并设置状态后，会再次调用渲染，这次

this.state.recipes[0]

是一个对象，因此，它不能算作有效的react组件，因此出现错误

使用第三个

p

标记，如您所述，

this.state.recipes.title

将成功编译，没有错误，但值将未定义

您只需要检查初始状态为空的边缘情况

const title =
  this.state &&
  this.state.recipes &&
  this.state.recipes.length &&
  this.state.recipes[0].title
    ? this.state.recipes[0].title
    : "";

render() {return (<p>{title}</p>)}

constructor（props）{
超级（道具）；
this.state={recipes:[]}
}
render（）{
返回(

{this.state.recipes.length>0？{this.state.recipes[0]。标题}:“”

)
}

我相信您正在异步获取JSON。在这种情况下，您应该考虑初始配方状态为空数组的边界情况。

运行第一个

p

标记时，因为JSON是异步获取的