Question

我是新开发人员 ReactJS ，我使用前端的 ReactJS ，后端的 NodeJS 和 MySQL 开发了一个表关于数据库。我想在表上使用“选择”请求获取数据，我在 Postaman 的后端进行了测试，效果很好。

我的前端：

class ListeClients extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clients: []
    };
  }

  componentDidMount() {
    console.log("inside componentWillMount");
    let self = this;
    axios({
      method: "get",
      url: "/app/listeclients/",
      withCredentials: true,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
        Accept: "application/json"
      }
    })
      .then(response => {
        // const clients = response.data;
        console.log(JSON.stringify(response.data));
        self.clients = response.data;
        //    this.setState({clients});
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    console.log(this.state.clients);
    return (
      <div className="animated fadeIn">
        <Row>
          <Col>
            <Card>
              <CardHeader>
                <h4>
                  <strong>
                    <i className="fa fa-align-justify" /> Tous les clients
                  </strong>
                </h4>
              </CardHeader>
              <CardBody>
                <div className="container">
                  <div className="panel panel-default p50 uth-panel">
                    <table className="table table-hover">
                      <thead>
                        <tr>
                          <th>Code</th>
                          <th>Prenom</th>
                          <th>Nom</th>
                          <th>Email</th>
                          <th>Telephone</th>
                          <th>Action</th>
                        </tr>
                      </thead>
                      <tbody>
                        {this.state.clients.map(client => (
                          <tr key={client.id}>
                            <td>{client.Code} </td>
                            <td>{client.Prenom}</td>
                            <td>{client.Nom}</td>
                            <td>{client.Email}</td>
                            <td>{client.Telephone}</td>
                            <td>
                              <a>Edit</a>|<a>Delete</a>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
              </CardBody>
            </Card>
          </Col>
        </Row>
      </div>
    );
  }
}

export default ListeClients;

但是当我在ReactJS上运行它时，我得到了：

[]
length: 0__proto__: Array(0)concat: ƒ concat()constructor: ƒ Array()copyWithin: ƒ copyWithin()entries: ƒ entries()every: ƒ every()fill: ƒ fill()filter: ƒ filter()find: ƒ find()findIndex: ƒ findIndex()forEach: ƒ forEach()includes: ƒ includes()indexOf: ƒ indexOf()join: ƒ join()keys: ƒ keys()lastIndexOf: ƒ lastIndexOf()length: 0map: ƒ map()pop: ƒ pop()push: ƒ push()reduce: ƒ reduce()reduceRight: ƒ reduceRight()reverse: ƒ reverse()shift: ƒ shift()slice: ƒ slice()some: ƒ some()sort: ƒ sort()splice: ƒ splice()toLocaleString: ƒ toLocaleString()toString: ƒ toString()unshift: ƒ unshift()values: ƒ values()Symbol(Symbol.iterator): ƒ values()Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}__proto__: Object
ListeClients.js:15 inside componentWillMount

我想获取此表上的数据：

请问该如何解决？

Answer 1

尝试使用完整的网址：

axios({
  method: "get",
  url: "http:/[YOUR_SERVER_LOCATION]/app/listeclients/",
  withCredentials: true,
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Content-Type": "application/json",
    Accept: "application/json"
  }
})

我认为是因为您收到的结果为空。

Answer 2

您的组件应如下所示：

   var data = JSON.stringify(row);
   var result = $.parseJSON(data);
       $.each(result, function (k, v) {
                //display the key and value pair
                console.log(k, v);
       });

您实际上不必声明Option Explicit Sub Macro10() Dim arr As Variant, i As Long, lr As Long arr = Array(37, 7, 6, 17, 18, 19, 20, 21) With Worksheets("sheet2") For i = 1 To 8 lr = Worksheets("sheet1").Cells(.Rows.Count, arr(i - 1)).End(xlUp).Row lr = application.max(lr, 2) .Range(.Cells(2, i), .Cells(lr, i)).Formula = _ "=value(" & Worksheets("sheet1").Cells(2, arr(i - 1)).Address(0, 0, external:=True) & ")" Next i End With End Sub。没有道理。
您正在直接更改/更改状态属性，而不是使用React提供的class ListeClients extends Component { constructor(props) { super(props); this.state = { clients: [] }; } componentDidMount() { axios({ method: "get", url: "/app/listeclients/", withCredentials: true, headers: { "Access-Control-Allow-Origin": "*", "Content-Type": "application/json", Accept: "application/json" } }) .then(response => { if (response && response.data) { this.setState({ clients: response.data }); } }) .catch(error => console.log(error)); } render() { let { clients } = this.state; return ( <div className="animated fadeIn"> <Row> <Col> <Card> <CardHeader> <h4> <strong> <i className="fa fa-align-justify" /> Tous les clients </strong> </h4> </CardHeader> <CardBody> <div className="container"> <div className="panel panel-default p50 uth-panel"> <table className="table table-hover"> <thead> <tr> <th>Code</th> <th>Prenom</th> <th>Nom</th> <th>Email</th> <th>Telephone</th> <th>Action</th> </tr> </thead> <tbody> {clients && clients.length && clients.map(client => ( <tr key={client.id}> <td>{client.Code} </td> <td>{client.Prenom}</td> <td>{client.Nom}</td> <td>{client.Email}</td> <td>{client.Telephone}</td> <td> <a>Edit</a>|<a>Delete</a> </td> </tr> ))} </tbody> </table> </div> </div> </CardBody> </Card> </Col> </Row> </div> ); } } export default ListeClients;方法。
除非状态self = this，否则Neeeever应该直接改变状态。

Answer 3

尝试使用默认的axios get（）方法：

axios.get("/app/listeclients/")
  .then(response => {
    // const clients = response.data;
    console.log(JSON.stringify(response.data));
    self.clients = response.data;
    //    this.setState({clients});
  })
  .catch(error => {
    console.log(error);
  });

默认情况下，它应该可以很好地处理json数据。

无法在ReactJS上使用Axios获取数据

3 个答案: