Question

我无法显示对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>

我做错了什么？

Answer 1

最初selectedData是将ajax更改为object之后的数组。因此，地图功能无法正常工作。

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

Answer 2

来自api的响应是json对象，您尝试在json对象中使用map的操作无效。如下所示，将selectedData更改为json对象

this.state = {
selectedData : {} 
}

在代码中，您可以像下面一样直接引用名称键并删除地图。

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

Answer 3

如果要将状态对象保留为数组，可以尝试使用类似的方法。

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

      })

Answer 4

constructor(props) {
super(props);
this.state = {
  loadedList: [],
  lists: [],
};
  }

componentDidMount() {
    axios.get('http://localhost:3001/../static/data/terrifdata.json')
      .then(response => {
       this.setState({
         lists: response.data,
         loadedList: response.data,
         isLoading: false
        })
    })
 }

<div>
{loadedList.map((postDetail, index) => {
                    return (
                  <h5>
                     {postDetail.name}
                  </h5>
                  )}
               }
</div>

在ReactJS中显示JSON数据

4 个答案: