在对象数组中获取空​​错误

Question

我收到一个奇怪的错误：无法在我的React应用程序中读取null的属性“ includes”。但是，我100％确定数组中的对象包含“名字”字段。

来自props的值是这样的对象数组：

[{ Id: 1, FirstName: "A" }, {Id: 2, FirstName: "X"} ] // this what comes from props

let myVar = this.props.values.filter(val=> val.FirstName === "X"); // works
let myVar = this.props.values.filter(val=> val.FirstName.includes("X") // Cannot read property 'includes' of null

console.log(myVar) // works (prints out the object as the first element of the array
console.log(myVar[0].FirstName) //  Cannot read property 'FirstName' of undefined

我想念什么？

Answer 1

下面的代码段对我有用，只需编辑您的代码即可不读取道具：

"parentActivity: MainActivity"

因此，这意味着问题的根源来自您的道具-如果像您的示例一样静态设置数据，则使用 let values = [{ Id: 1, FirstName: 'A' }, { Id: 2, FirstName: 'X' }]; let myVar = values.filter((val) => val.FirstName === 'X'); // works let myVar = values.filter((val) => val.FirstName.includes('X')); // Cannot read property 'includes' of null console.log('myVar', myVar); // works (prints out the object as the first element of the array console.log('myVar firstName', myVar[0].FirstName); 两种方法均能正常工作。

我可以想到发生这种情况的几个原因。您的道具是否来自http请求到另一个终结点（到API）？如果您的数据不是静态数据，并且是从API提取的，则需要提供检查以确保这些值准备就绪，然后再尝试访问它们的属性。

例如如果您的道具应该已经取回一个数组，但是在获取请求完成之前，您尝试使用let values = [{ Id: 1, FirstName: 'A' }, { Id: 2, FirstName: 'X' }];来访问信息，但该信息仍然为null。

如果您实际上是在获取数据并将其作为道具传递，请尝试：

includes

在对数据执行任何操作之前，请确保数据不为null或未定义。

如果这不能解决您的问题，请尝试在每次迭代中检查if(values) { values.filter((val) => val.FirstName.includes('X')); } 对象，并在尝试访问val之前确保每个对象都存在并具有FistName。

您可以尝试的方法：

.includes