Question

我很难通过返回JSON数据来呈现HTML。 JSON没有任何问题，但我无法以我想要的方式呈现HTML。它渲染了一个混乱的HTML。

这是我的db.json

{
  "houses": [
  {     
    "name": "house 1",
    "description": "This is the description of the house 1",
    "photos": [      
      "photo1_house_1.jpg", "photo2_house_1.jpg", "photo3_house_1.jpg"       
    ]
  },
  {     
    "name": "house 2",
    "description": "This is the description of the house 2",
    "photos": [      
      "photo1_house_2.jpg", "photo2_house_2.jpg", "photo3_house_2.jpg"       
   ]
 },
 {
   "name": "house 3",
   "description": "This is the description of the house 3",
   "photos": [      
      "photo1_house_3.jpg", "photo2_house_3.jpg", "photo3_house_3.jpg"       
    ]
  }
 ]
}

这是我的组件从上面的JSON返回数据

 import React, { Component } from 'react'
 import axios from 'axios'

 const URL_HOUSES = 'http://localhost:3001/houses';

class Houses extends Component {
   constructor(props) {
     super(props)
     this.state = {
     houses: []
   }
}

componentDidMount() {
  axios.get(URL_HOUSES)
    .then(res => {
      this.setState({ houses: res.data })
    })
  }

render() {
  return (
    <div>        
      {this.state.houses.map(item =>
        <div>
          <h2>{item.name}</h2>
          <p>{item.description}</p>
           <ul>           
             <li>{item.photos}</li>       
          </ul>
        </div>
      )}         
    </div>
   )
 }
}

export default Houses;

检查它返回此HTML的开发工具：

<div>
  <h2>house 1</h2>
  <p>This is the description of the house 1</p>   
  <ul>
    <li>
      "photo1_house_1.jpg"
      "photo2_house_1.jpg"
      "photo3_house_1.jpg"
    </li>
    <li>
      "photo1_house_2.jpg"
      "photo2_house_2.jpg"
      "photo3_house_2.jpg"
    </li>
    <li>
      "photo1_house_3.jpg"
      "photo2_house_3.jpg"
      "photo3_house_3.jpg"
    </li>
  </ul>
<div>
<div>
  <h2>house 2</h2>
  <p>This is the description of the house 2</p>
  <li>
    "photo1_house_1.jpg"
    "photo2_house_1.jpg"
    "photo3_house_1.jpg"
  </li>
  <li>
    "photo1_house_2.jpg"
    "photo2_house_2.jpg"
    "photo3_house_2.jpg"
  </li>
  <li>
    "photo1_house_3.jpg"
    "photo2_house_3.jpg"
    "photo3_house_3.jpg"
  </li>
</ul> 
</div> 
<div>
  <h2>house 3</h2>
  <p>This is the description of the house 3</p>
    <ul>
    <li>
      "photo1_house_1.jpg"
      "photo2_house_1.jpg"
      "photo3_house_1.jpg"
    </li>
    <li>
      "photo1_house_2.jpg"
      "photo2_house_2.jpg"
      "photo3_house_2.jpg"
   </li>
   <li>
     "photo1_house_3.jpg"
     "photo2_house_3.jpg"
     "photo3_house_3.jpg"
   </li>
  </ul>
 </div>
</div>

然后我想回复这样的事情：

  <h2>house 1</h2>
  <p>This is the description of the house 1</p>   
  <ul>
    <li>"photo1_house_1.jpg"</li>
    <li>"photo2_house_1.jpg"</li>
    <li>"photo3_house_1.jpg"</li>        
  </ul>
<div>
<div>
  <h2>house 2</h2>
  <p>This is the description of the house 2</p>     
  <ul>
    <li>"photo1_house_2.jpg"</li>  
    <li>"photo2_house_2.jpg"</li>  
    <li>"photo3_house_2.jpg"</li>        
  </ul> 
</div> 
<div>
  <h2>house 3</h2>
  <p>This is the description of the house 3</p>
    <ul>
      <li>"photo1_house_3.jpg"</li>  
      <li>"photo2_house_3.jpg"</li> 
      <li>"photo3_house_3.jpg"</li>             
    </ul>
 </div>
</div>

请帮我解决一下如何解决。谢谢！

Answer 1

你应该为echo $date = date('Y-m-d',strtotime($date));数组

创建另一个循环

photos

Answer 2

在渲染方法中需要2个嵌套.map：

render() {
  return (
    <div>        
      {this.state.houses.map(item =>
        <div>
          <h2>{item.name}</h2>
          <p>{item.description}</p>
           <ul>
             {item.photos.map(p => <li>{p}</li>)}
          </ul>
        </div>
      )}         
    </div>
   )
 }
}

ReactJS - 关于JSON返回的困难

2 个答案: