如何在HTML页面上使用reactjs显示此json数据

我对网页设计非常陌生（实际上没有任何先验知识），目前正在尝试创建一个网站，该网站使用Nodejs从我的MySQL数据库中提取数据，并使用Reactjs将其显示在我的HTML页面上。任何帮助都将不胜感激

我之前从中复制了代码，但当我使用本地主机服务器的URL时，其中包含JSON数据，它只显示错误“TypeError:this.state.data.map不是函数”

这是我的app.js

class App extends React.Component {
    constructor(){
      super() 
        this.state = {
          data: []
        }

    }
    componentDidMount() {
      $.ajax({
         url: "http://localhost:4000/stockin",
         type: "GET",
         dataType: 'json',
         ContentType: 'application/json',
         success: function(data) {

           this.setState({data: data});
         }.bind(this),
         error: function(jqXHR) {
           console.log(jqXHR);
         }.bind(this)
      })
    }
    render() {


      return (
        <table>
        <tbody>{this.state.data.map(function(item, key) {

                 return (
                    <tr key = {key}>
                        <td>{item.No}</td>
                        <td>{item.Stocktype}</td>
                        <td>{item.Binid}</td>
                        <td>{item.Stockid}</td>
                    </tr>
                  )

               })}</tbody>
         </table>
      )
    }
  }

  ReactDOM.render(<App/>, document.getElementById('app'))

---

我希望最终能够在我的HTML网站上以表格形式显示数据。

可能是问题在于最初数据是空的，所以您必须检查

数据的长度

{this.state.data.length  == 0 && <div>No data found</div>} 
{this.state.data.length > 0 && 
 <table>
    <tbody>{this.state.data.map(function(item, key) {

             return (
                <tr key = {key}>
                    <td>{item.No}</td>
                    <td>{item.Stocktype}</td>
                    <td>{item.Binid}</td>
                    <td>{item.Stockid}</td>
                </tr>
              )

           })}</tbody>
     </table>
  }

{this.state.data.length==0&&No data found}
{this.state.data.length>0&&
{this.state.data.map（函数（项，键）{
返回(
{item.No}
{item.Stocktype}
{item.Binid}
{item.Stockid}
)
})}
}
您需要在
数据.stockin
上调用
.map

      return (
        <table>
        <tbody>{this.state.data.stockin.map(function(item, key) {

                 return (
                    <tr key = {key}>
                        <td>{item.No}</td>
                        <td>{item.Stocktype}</td>
                        <td>{item.Binid}</td>
                        <td>{item.Stockid}</td>
                    </tr>
                  )

               })}</tbody>
         </table>

这样，当检查
this.state.data.stockin.map
时，
render
方法中可能出现的错误就消失了，因为调用时
this.state.data
可能为空
 尝试在代码中进行如下更改

success: function(data) {
             this.setState({data: data.stockin});
         }.bind(this),

然后它将始终正常工作

希望这有帮助。
您的响应数据不是直接的数组。您可能必须准确地执行
this.setState（{data:data.stockin}）
，而且也不建议将jquery与react一起使用，您可以尝试对axios@MaazSyedAdeeb非常感谢你这么说，我做了你说的，现在它的工作完美！非常感谢。
this.setState({data: data.stockin});

success: function(data) {
             this.setState({data: data.stockin});
         }.bind(this),