Question

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

我以前从how to display json data with ReactJs in the table复制了代码，但是当我将本地服务器中的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'))

这是我的json数据

{"stockin":[{"No":1,"Stocktype":"XM21","Binid":"1234124","Stockid":"135215215","Datestockin":"2019-05-05T16:00:00.000Z","Quantity":52,"Remarks":"Good stock"},
{"No":2,"Stocktype":"XM22","Binid":"2352342","Stockid":"123456721","Datestockin":"2019-05-05T16:00:00.000Z","Quantity":21,"Remarks":"Good stock"},
{"No":3,"Stocktype":"screw","Binid":"2432342","Stockid":"123456721","Datestockin":"2019-05-05T16:00:00.000Z","Quantity":23,"Remarks":"Good stock"},
{"No":4,"Stocktype":"screw","Binid":"1325123","Stockid":"242353223","Datestockin":"2019-04-30T16:00:00.000Z","Quantity":32,"Remarks":"Screws for bins"}]}

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

Answer 1

尝试像下面的代码一样进行更改

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

然后它会一直正常工作

希望这会有所帮助。

Answer 2

可能是问题所在，因为最初数据是空的，所以您需要检查data的长度，例如

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

Answer 3

您需要改为在.map上致电data.stockin。

      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>

但是您可以在您的componentDidMount中，而不是这样做，您可以在成功回调中完成此操作...

this.setState({data: data.stockin});

这样做，您可以避免在检查render时在this.state.data.stockin.map方法中可能出现的错误，因为在调用时this.state.data可能为空。

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

3 个答案: