代码之家 › 专栏 › 技术社区 › TheTechGuy

在ReactJS中显示JSON数据

reactjs

TheTechGuy · 技术社区 · 6 年前

我无法显示对HTML的JSON响应,我得到的只是 his.state.selectedData.map is not a function .

这是有效载荷

{
    "id": 1,
    "name":"john",
    "age" : 22
}

这在构造函数中

this.state = {
selectedData : [] 
}

这是HTTP请求:

axios.post("/api/data", data)
          .then(res =>{
             console.log(res)
             this.setState({
                selectedData : res.data
             })

          })

这就是我试图展示结果的方式

 <div>
  <ul>
    { this.state.selectedData.map(data => {
      <li>{data.name}</li>
    })}
  </ul>
  </div>

我做错什么了?

3 回复 | 直到 6 年前

kumar k 6 年前

api的响应是json对象,您尝试在json对象中使用map将不起作用。在构造函数中将selectedData更改为json对象,如下所示

this.state = {
selectedData : {} 
}

在代码中,您可以直接引用下面的名称键并删除映射。

this.state.selectedData.name && <li>{this.state.selectedData.name}</li>

Sarath Kumar 6 年前

最初 selectedData 是在ajax之后将其更改为对象的数组。所以map函数不起作用。

class Test extends React.Component {
  constructor(props) {
     super(props)
     this.state = {
        selectedData :[]
     }
   }

readJson(json){
    let output=[]
    Object.keys(json).forEach(key=>{
        output.push(
            <li>{json[key]}</li>
        )
    });

    return output;
}

render() {
    return (
      <div>
        <ul>{this.readJson({ "id": 1,"name":"john","age" : 22 })}</ul>
      </div>
    )
  }
}

A. Larsson 6 年前

如果希望将状态对象保持为数组,可以尝试这样的方法。

let newData = this.state.selectedData;
axios.post("/api/data", data)
      .then(res =>{
         console.log(res)
         newData.push(res.data)
         this.setState({
            selectedData : newData
         })

      })

推荐文章