如何指定/选择对象的特定属性

Question

我正在创建一个反应网络应用程序。我在父组件中的状态是一个对象数组（存储在这个数组中的一对多对象......它可以是任意数量的对象）。我想通过道具将数组的对象 X 发送到我的子组件。这是我的子组件：

import React, { Component } from 'react'

export class Card extends Component {

    render() {
        console.log('in card');
        console.log(this.props.newCard);
        return (
            <div>
                <h2>Here is a card!</h2>

            </div>
        )
    }
}

export default Card

对于必要的上下文，这是我在调用子组件（名为 Card）的父组件中的渲染方法：

render() {
        return (
            <div>
                <Card newCard={this.state.cardList[this.state.eachCard]}></Card>
                <button>Next</button>
            </div>
        )
    }

this.state.eachCard 只是指一个累加器，我稍后将在单击“下一步”按钮时实现遍历数组的每个对象。现在它只是设置为位置 0 用于测试目的。

当我 console.log 子组件中的 newCard 属性时，这是从父组件发送到子组件的对象的结构：

{CardID: 3, CardName: "test", CardDefinition: "testing", category_CategoryID: 2}

但是，我想指定此对象的特定属性。例如，我想检索卡的名称。但是，当我尝试 console.log 这个

console.log(this.props.newCard.CardName);

我收到以下错误：

"Cannot read property 'CardName' of undefined"

这对我来说没有意义，因为 this.props.newCard 不是未定义的。因此，对我来说，将 newCard 属性指定为 newCard.CardName 应该在逻辑上起作用。我无法弄清楚我错过了什么。这是某种语法错误吗？还是我的逻辑完全错误？ 我似乎非常接近，但我对如何进行......任何想法肯定会受到赞赏。谢谢！！

Answer 1

良好的第一步是防止此处未定义。我不确定你的代码的其余部分是什么样的，但如果某处发生了一些异步，那么在第一次渲染时，prop 可能是未定义的。当您将 undefined 传递给 console.log 时，它不会记录任何内容，因此如果该组件确实被渲染了两次，那么您将不会获得第一次渲染的日志。测试这个理论的一个好方法是像下面这样做你的控制台日志：

console.log('newCard', this.props.newCard);

你也可以在这里防范 undefined，这样如果 this.props.newCard 实际上是 undefined，它就不会通过返回 null 来引发错误。

export class Card extends Component {

    render() {
        if (this.props.newCard === undefined) {
          return null;
        }
        return (
            <div>
                <h2>Here is a card!</h2>

            </div>
        )
    }
}

export default Card

因附加上下文而编辑。

在 react 中将数组中的项渲染为子项的方式是使用数组对象的 map 方法并将组件传递给回调：

        return (
            <div>
                {
                  this.state.cardList.map(eachCard => (<Card newCard={eachCard} />))
                }
                <button>Next</button>
            </div>
        )
    }

Answer 2

您的控制台日志中有错字，请将porps 更改为props。