访问组件中的 React prop 数组

Question

我正在尝试映射存储在我的 React 组件中的 props 中的数组。问题是我不断收到错误提示 'step is not defined'，即使我定义了一系列步骤，如下所示。对我做错了什么有什么想法吗？提前致谢！

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>
);

}

Answer 1

问题出在这一行，您忘记使用 {}，要在 HTML 元素中使用任何 js 代码总是使用 {} 试试这个：

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

还有一件事总是在 loop 中创建 ui elements dynamically 时将唯一的 key 分配给每个项目。

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>
);

访问组件中的 React prop 数组

Accessing React prop array in component

reactjs

react-redux