Question

无法在 React JS 表中呈现子对象

2020-05-01

105

javascript reactjs

我正在尝试渲染一个处于状态的对象。 this.state 的内容是：

"statement": {
  "creator": "8ff243b2-f21e-43f3-9090-4aa679fbeb1a",
  "id": "bf4c965e-bd59-48c8-b31a-8f67529e5fde",
  "impactors": [
    "978388e8-2987-4c89-82b6-4da619d82935",
    "1d75e2a7-bf2a-4f55-ba68-373752b24f98"
  ],
  "score": {
    "impactors": 2,
    "net": 3,
    "percentage": 0.75,
    "total_votes": 4
  },
  "statement": "The Earth is round."
}

在我的 React JS 应用中，我可以渲染部分子对象（语句），但不能渲染全部。这是我的代码：

    renderStatement() {
        return  (

            <tbody>
                <tr>
                    <td>Statement: </td>
                    <td>{this.state.statement.score}</td>
                </tr>
            </tbody>
        )
    }

正如预期的那样，上面的代码返回错误： 错误：对象作为 React 子对象无效（找到：带有键 {impactors、net、percentage、total_votes} 的对象）。如果您想要渲染子对象集合，请改用数组。

我真正想要的是 percentage ，它是 score 下面的节点。当我尝试深入研究并让它仅呈现 percentage 时，如下所示：

    renderStatement() {
        return  (

            <tbody>
                <tr>
                    <td>Statement: </td>
                    <td>{this.state.statement.score.percentage}</td>
                </tr>
            </tbody>
        )
    }

我收到以下错误： TypeError：无法读取未定义的属性“percentage”。 任何其他对象（ 'creator'、'id'、'impactors'、'statement' ）都可以正常工作。

Answer 1

这是我修复它的方法：

    renderStatement() {
        const score = this.state.statement.score || {}
        return  (

            <tbody>
                <tr>
                    <td>Statement: </td>
                    <td>{score.percentage}</td>
                </tr>
            </tbody>
        )
    }

Answer 2

您可以执行以下操作：

renderStatement() {
    const text = (typeof this.state.statement.score !== "undifined") ? 
        this.state.statement.score.percentage : ''
    return  (
        <tbody>
            <tr>
                <td>Statement: </td>
                <td>{text}</td>
            </tr>
        </tbody>
    )
}