访问组件中的React prop数组

Question

我正在尝试映射存储在我的React组件中的props中的数组。问题是我不断收到错误，指出“步骤未定义”，即使我已经定义了一系列步骤，如下所示。我对错误做什么的想法？提前谢谢！

class

}

Answer 1

问题出在这一行，你忘了使用{}，使用HTML元素内的任何js代码总是使用{}试试这个：

stepList = <ul>
    {
       steps.map(
         (step,i) => <li key={i}>{step.title}</li>
       )
    }
  </ul>;

在key中创建ui elements dynamically时，还要为每个项目分配唯一的loop。

Answer 2

您需要将steps.map包裹在{ }（<ul></ul>标记内）

所以它应该是：

render() {
const protocol = this.props.protocol;
const steps = protocol.steps;
let stepList = null;

if (steps != null) {
  stepList = <ul>
    {steps.map(
      step => <li>{step.title}</li>
    )}
  </ul>;
} else {
  stepList = 'Do not display list';
}

return (
  <div className="protocols-detail">
    List of steps for {protocol.title}
    { stepList }

  </div>
);