Question

我正在尝试使用ReactJS在Web应用程序上迭代并显示JSON的某些值。

我的渲染如下：

render() {

  const orders = 
  Object.keys(this.state.data).map((e,i) => {
   return (
     <div key = {i}>
       <div>ID: {this.state.data[e].id}</div>
       <div>Email: {this.state.data[e].email}</div>
       <div>Note: {this.state.data[e].note}</div>
       <div>{this.findValue(e)}</div>
     </div>
   )
 })

 return (
   <div>
     <div>
       {orders}
     </div>
   </div>
 );
}

现在一切看起来都很好，直到我运行this.findValue，它在第一次迭代后立即返回，而不是返回多个div。

findValue = (e) => {
    for(let key2 in this.state.data[e].line_items) {    
        return (
          <div>
            Line item: {this.state.data[e].line_items[key2].title}
         </div>
        )
   }

我如何能够退回每个订单项？预先感谢。

Answer 1

从给定map的函数中返回某些内容时，您只是在返回当前元素在新数组中应映射的内容。当您在for..in内部返回时，您是从findValue方法返回的。

您也可以在map中的键数组上使用line_items。

findValue = e => {
  const { line_items } = this.state.data[e];
  return Object.keys(line_items).map(key => (
    <div key={key}>Line item: {line_items[key].title}</div>
  ));
};

遍历渲染器中的嵌套json对象数组（ReactJS）

1 个答案: