Question

我是第一次使用React和来自数据库的实际实时数据。我正在使用this article中概述的访存，并且工作正常。我已经能够从php文件中接收数据以进行打印以进行反应。

我现在遇到麻烦了，因为React不再有意义。有些变量可以正常工作，而其他变量使用完全相同的数据则不能。

例如：给定这个对象数组

我可以执行以下操作将其分配给变量：

var posts = this.props.postData.map(function(entry, index){
            return <li>{entry.post_title}</li>;
          })

它会很好地输出：

但是，在与上述相同的功能中，如果我想将对象中的特定字符串分配给变量，突然反应会告诉我对象未定义。

var singlepost = <span>{this.props.postData[0].post_content}</span>

var singlepost = this.props.postData[0].post_content;

甚至：

var singlepost = this.props.postData[0];
return (
    <div>{singlepost.post_content}</div>
)

将导致以下结果：

无论我尝试什么，React都会告诉我它是未定义的，即使我在使用对象之前console.log该对象，它的内容也可以在控制台中很好地显示。一旦指定了所需的字符串，就会出现未定义的错误。

有具体的做法吗？

Answer 1

也许第一个渲染中的postData是空数组。只需添加条件即可渲染：

if(!this.props.postData.length) {
    return null;
}

var singlepost = this.props.postData[0];
return (
    <div>{singlepost.post_content}</div>
);

我更喜欢这样做，因为首先可以避免无效案例，从而使代码更清晰。

Answer 2

您可以做这样的事情

var singlepost = this.props.postData[0];
let post = null;
if(singlepost){
  post = <div>{singlepost.post_content}</div>
}
return (
    post
)

Answer 3

如果数组最初为空，则需要检查。您可以使用length：

if (this.props.postData.length) {
  const { post_content } = this.props.postData[0];
  return <div>{post_content}</div>;
}
return <div>No data</div>;;

Answer 4

您还可以通过这种方式更好地执行null检查。它有点冗长，但是我很欣赏它的安全性。也有点重复

if (this.props.postData && this.props.postData.length > 0) {
  // Do your computation here
}

让我知道这是否满足您的需求！

在React中为变量分配数据

4 个答案: