子组件列表未呈现答案

【问题标题】：Child component list not rendering子组件列表未呈现
【发布时间】：2023-03-25 03:29:01
【问题描述】：

我正在尝试使用子组件呈现一个列表，但它最终没有呈现任何东西。

PropertyBar 组件中的片段：

updateSelectedCell() {
    if (graph.selectedCell != null) {
      this.setState({
        selectedCell: graph.selectedCell,
        cellProperties: Array.from(graph.selectedCell.value.attributes)
      });
    }
  }

  renderPropertyList() {
    this.state.cellProperties.map(key => {
      <PropertyBarItem name={key.nodeName} value={key.nodeValue} />
    })
  }

  render() {
    if (this.state.selectedCell != null) {
      return (
        <div>
          <Button variant="contained" color="primary" fullWidth={true} onClick={() => this.updateSelectedCell()}> View properties </Button>
          <List>
            {this.renderPropertyList}
          </List>
        </div>
      )
    }
    return (
      <div>
        <Button variant="contained" color="primary" fullWidth={true} onClick={() => this.updateSelectedCell()}> View properties </Button>
        <List>
          <p>Click on a cell to view its properties.</p>
        </List>
      </div>
    )
  }

当用户点击按钮时，它会使用一个数组更新状态，然后应该使用数组内的键呈现一个 PropertyBarItem 列表。它最终不显示任何内容，但不会崩溃。使用简单的 p 标签进行测试，它也不会呈现任何内容：

renderPropertyList() {
    this.state.cellProperties.map(key => {
      <p> {key} </p>
    })
  }

【问题讨论】：

标签： reactjs

【解决方案1】：

您没有调用renderPropertyList 方法。添加() 调用它。

<div>
  <Button
    variant="contained"
    color="primary"
    fullWidth={true}
    onClick={() => this.updateSelectedCell()}
  >
    View properties
  </Button>
  <List>{this.renderPropertyList()}</List>
</div>

您还必须从renderPropertyList 返回结果，并从给map 的函数中返回JSX。

renderPropertyList() {
  return this.state.cellProperties.map(key => {
    return <PropertyBarItem name={key.nodeName} value={key.nodeValue} />
  })
}

【讨论】：

糟糕，我想我之前已经解决了这个问题，但是一堆 ctrl-z 可能会让我比我想要的更远。但是现在我已经修复了它，它仍然没有呈现列表。即使我放置了像<p> {key} </p> 这样的p 标签而不是我的子组件，屏幕上也不会显示任何内容。
@Pierre 你有没有在updateSelectedCell 登录graph.selectedCell 看看它不是null？
是的，它不为空。当我单击按钮执行updateSelectedCell 时，它会在if 语句中呈现该部分，因为<p>Click on a cell to view its properties.</p> 部分之后就消失了。所以它正在渲染新的 return 语句，只是不渲染 renderPropertyList 内的列表。
@Pierre 太棒了！第一个return 返回作为map 结果的数组。在添加给map 的函数中的return 之前，您只得到了一个包含undefined 值的数组，因为没有返回任何内容。从提供给map 的函数返回的内容是数组中的每个元素将映射到结果数组中的内容。
啊，好吧，这是有道理的。非常感谢..再次。你还帮助我解决了我的最后一个问题，所以我向你致敬！

【解决方案2】：

您缺少return 声明：

renderPropertyList() {
  return this.state.cellProperties.map(key => {
    <PropertyBarItem name={key.nodeName} value={key.nodeValue} />
  })
}

另外，一定要调用方法：

 if (this.state.selectedCell != null) {
      return (
        <div>
          <Button variant="contained" color="primary" fullWidth={true} onClick={() => this.updateSelectedCell()}> View properties </Button>
          <List>
            {this.renderPropertyList()}
          </List>
        </div>
      )
    }

【讨论】：