react读取json数据

在 React 中读取 JSON 数据的方法有很多,以下是几种常用的方法:

  • 使用 fetch API:fetch API 可以帮助我们从服务器获取 JSON 数据,读取数据之后我们可以使用 setState 方法将读取的数据保存到状态变量中。
  •   componentDidMount() {
        fetch("https://api.example.com/data.json")
          .then(response => response.json())
          .then(data => this.setState({ data }));
    
  • 使用 axios:axios 是一个基于 Promise 的 HTTP 客户端,可以帮助我们方便地读取服务器上的 JSON 数据。
  •   componentDidMount() {
        axios.get("https://api.example.com/data.json")
          .then(response => this.setState({ data: response.data }));
    
  • 使用 jQuery 的 .getJSON方法:如果你的项目中已经引入了jQuery,也可以使用.getJSON 方法:如果你的项目中已经引入了 jQuery,也可以使用 .getJSON 方法读取服务器上的 JSON 数据。
  •   componentDidMount() {
        $.getJSON("https://api.example.com/data.json", data => {
          this.setState({ data });
    

    以上三种方法都可以实现从服务器读取 JSON 数据的需求。请根据项目中的具体情况选择适合的方法。

  •