Question

我试图弄清楚为什么在尝试迭代多维数组时出现语法错误时，我已经摸不着头脑了几个小时：

const InputPanel = React.createClass({
  render() {
    const { board } = this.props;

    return(      
      <br />
      {board.map(rows => {
        rows.map(cell => <div className="digit">1</div>); 
      })
    }
  );

 }
});

CodePen：

http://codepen.io/anon/pen/vXgmrR

我尝试添加\ modify括号类型，没有任何帮助。

以下是我试图制作的观点：

</br>
<div className="digit">1</div>
<div className="digit">1</div>
<div className="digit">1</div>
</br>
<div className="digit">1</div>
<div className="digit">1</div>
<div className="digit">1</div>
</br>
<div className="digit">1</div>
<div className="digit">1</div>
<div className="digit">1</div>

Answer 1

代码存在一些问题。

您的rows.map(...)声明实际上并未输出任何内容。您需要return rows.map的结果才能呈现它。

你可以这样做：

{board.map(rows => {
        return rows.map(cell => <div className="digit">1</div>); 
    })
}

或者这个：

{board.map(rows => rows.map(cell => <div className="digit">1</div>))}

我不清楚this方法中的render是否会实际引用该组件。我通常使用ES2015 classes or stateless functions创建我的组件，因为逻辑似乎对我来说更清晰。

因此，您的组件可以重写：

class InputPanel extends React.Component {
    render() {
        const { board } = this.props;

        return(
            <br />
            {board.map(rows =>
                    rows.map(cell => <div className="digit">1</div>)
                )
            }
        );

    }
}

或者更简单：

const InputPanel = ({ board }) =>  (
    <br />
    {board.map(rows => rows.map(cell => <div className="digit">1</div>))}
);

现在，我可能错了this - 就像我说的那样，我并不熟悉React.createClass做事方式。

React不会喜欢组件中的<br />。 render方法需要返回单个元素，因此您需要将render方法中的所有内容都包含在<div>或其他元素中。

最后一个是你的语法错误的来源：没有那个包装元素，Javascript（或者更准确地说，无论你用什么系统来解释JSX代码）都会看到如下内容：

return (
    { /* some Javascript code here */ }
);

这是无效的Javascript - 你不能像这样返回一个代码块。

使用封闭的<div>，代码如下所示：

return (
    <div>
        { /* some Javascript code here */ }
    </div>
);

是有效的JSX代码，您的JSX预处理器可以解析它。

所以，要将它全部包装起来，组件的最简单形式将如下所示：

const InputPanel = ({ board }) =>  (
    <div>
        {board.map(rows => rows.map(cell => <div className="digit">1</div>))}
    </div>
);

顺便说一句，我建议您查看eslint来填写您的代码＆amp;抓住这样的错误。我试图虔诚地使用它，我喜欢认为它提高了我的代码质量： - ）

Answer 2

对于本机反应有一个问题，我已经准备好进行地图迭代了但有一个关键是我正在做的事情：

{this.state.some_data.map(item => (
  <View style={styles.row} key={item.product_id}>
    <Text style={styles.header}>{item.title}</Text>
    // BUT item.variations_json IS a multi dimential object ???
  </View>
))}

我的解决方案是......

  render() {
    //...
  const someVariation = (variation, product_id) => {
    var vdata = [];
    Object.entries(variation.data).map(([key,v]) => {
      vdata.push(
        <View key={key}>
          <Text >{v.sku}</Text>
          <Text >{v.title}</Text>
          <Text>{v.price}</Text>
        </View>
      );
    });
   return vdata;
  };
//...

然后是

  {this.state.some_data.map(item => (
   <View style={styles.row} key={item.product_id}>
   <Text style={styles.header}>{item.title}</Text>
   <someVariation data={item.variations_json} id={item.product_id}></someVariation>
    </View>
   ))}

语法错误 - 在React-Redux中映射多维数组

2 个答案: