使用 listItems 中的实际数据渲染文件内容

Question

在此渲染函数中，我从 SharePoint 中的列表中检索数据并渲染

fileContent

，但属性并未从

listItems

替换

这是我尝试过的渲染函数的代码：

 public render(): React.ReactElement<ILinkItemsWithReactProps> {
    return (
      <div className={styles.linkItemsWithReact}>
        <ol>
          {this.state.listitems.map((listitem, listitemkey) => {
            console.log(this.state.listitems);
            return (
              <li key={listitemkey}>
                <a>{this.state.fileContent}</a>
              </li>
            );
          })}
        </ol>
      </div>
    );
  }

我想渲染特定模板的

fileContent

，并根据

listItems

的实际数据显示该模板的属性。

Answer 1

看起来您正在迭代

this.state.listitems

但除了作为关键道具之外没有使用它们。

您的意思是在循环中渲染

listitem.fileContent

或类似内容吗？

如果您可以提供整个状态的更多详细信息，那么调试您的问题会更容易。

Answer 2

您没有使用地图回调提供的值，而是使用其他状态。

如果您将

content

中的

listitem.content

替换为正确的属性，则以下代码应该有效。

此外，Array.prototype.map()回调的第二个参数是数组中的

index

，所以我也更改了它。

return (
  <div className={styles.linkItemsWithReact}>
    <ol>
      {this.state.listitems.map((listitem, index) => {
        return (
          <li key={index}>
            <a>{listitem.content}</a> // TODO: replace content with the actual attribute
          </li>
        );
      })}
    </ol>
  </div>
);