反应在JSON中获取各种URL的每个URL

Question

我有一个这样的JSON文件：

[
  {
    "name": "google",
    "route": "/google",
    "url": "www.google.com"
  },
  {
    "name": "bing",
    "route": "/bing",
    "url": "www.bing.com"
  },
  {
    "name": "duckduckgo",
    "route": "/duckduckgo",
    "url": "www.duckduckgo.com"
  }
]

我想获取此JSON文件的每个URL，并在表中显示获取的状态。我的代码有效：

  // Construct an object with the JSON data
  const [data, setData] = useState(jsonData)

  // We need to put the fetch call inside useEffect
  // otherwise the fetchData will be called over and over every time the state is updated
  useEffect(() => {
    let headers = new Headers()

    //headers.append('Content-Type', 'application/json')
    //headers.append('Accept', 'application/json')
    headers.append('Origin', 'http://localhost:8080')

    // Array with all the promises from each fetch
    // @r contains all the info about the fetch, we are going to use the r.status later
    // @i is the index of the url in the JSON file
    const promises = jsonData.map((url, i) => {
      return fetch(url.route, {
        mode: 'no-cors',
        headers: headers,
      }).then((r) => ({
        fetch: r,
        index: i,
      }))
    })

    Promise.all(promises)
      .then((result) => {
        // Iterates through each promise and replaces the status value from the JSON file
        // with the status value from the fetch
        const new_data = result.map((d) => {
          jsonData[d.index].status = d.fetch.status
          return jsonData[d.index]
        })
        setData(new_data)
      })
      .catch((error) => {
        console.log('Error: ', error)
      })
  }, [])

---

现在，我更新了我的JSON文件，它更复杂了：

[
  {
    "section": "Sonarqube",
    "img": "sonarqube.png",
    "urls": [
      {
        "name": "SonarQube",
        "route": "/sonarqube",
        "url": "https://sonarqube-enterprise.com"
      },
      {
        "name": "SonarQube1",
        "route": "/sonarqube",
        "url": "https://sonarqube-enterprise1.com"
      },
      {
        "name": "SonarQub2e",
        "route": "/sonarqube",
        "url": "https://sonarqube-enterprise2.com"
      }
    ]
  },
  {
    "section": "Twistlock",
    "img": "twistlock.png",
    "urls": [
      {
        "name": "Twistlock",
        "route": "/twistlock",
        "url": "https://twistlock.com"
      }
    ]
  }
]

我正在尝试更改代码以读取 urls 每个部分中的数组，但是我无法弄清楚如何使其起作用。你能帮我吗这就是我现在的位置：

  const [data, setData] = useState(jsonData)

  useEffect(() => {
    const promises = jsonData.map((section, s) => {
      return section.urls.map((url, i) => {
        return fetch(url.route, {
          mode: 'no-cors',
        }).then((r) => ({
          fetch: r,
          index: i,
          sectionId: s,
        }))
      })
    })

    Promise.all(promises)
    .then((result) => {
      const new_data = result.map((section) => {
        section.map((d) => {
          jsonData[d.sectionId].urls[d.index].status = d.fetch.status
          jsonData[d.sectionId].urls[d.index].statusText = d.fetch.statusText
          return jsonData[d.sectionId].urls[d.index]
        })
      })
      setData(new_data)
    })
    .catch((error) => {
      console.log('Error: ', error)
    })
  }, [])

我相信我快到了，但我真的不明白如何做这项工作：哦，你能帮我

Answer 1

您返回嵌套地图中的数组或jsondata.map中的保证，

[
    [
        Promise { <pending> },
        Promise { <pending> },
        Promise { <pending> }
    ],
    [ Promise { <pending> } ]
]

您需要添加.flat（） flatten array（ https://develoder.mozilla.mozilla.org/en-us/en-us/docs/ddocs/web/javascript /参考/global_objects/array/flat ）

const promises = jsonData.map((section, s) => {
    return section.urls.map((url, i) => {
        return fetch(url.route, {
            mode: 'no-cors',
        }).then((r) => ({
            fetch: r,
            index: i,
            sectionId: s,
        }))
    })
}).flat()

Answer 2

尝试这样。您可以首先循环外部数组，然后做Promises.All。并破坏您想要的属性。

const jsonData = [ { section: "Sonarqube", img: "sonarqube.png", urls: [ { name: "SonarQube", route: "/sonarqube", url: "https://sonarqube-enterprise.com" }, { name: "SonarQube1", route: "/sonarqube", url: "https://sonarqube-enterprise1.com" }, { name: "SonarQub2e", route: "/sonarqube", url: "https://sonarqube-enterprise2.com" } ] }, { section: "Twistlock", img: "twistlock.png", urls: [ { name: "Twistlock", route: "/twistlock", url: "https://twistlock.com" } ] } ];

const App = () => {

  const [data, setData] = React.useState(jsonData);

  React.useEffect(() => {
    const promises = jsonData.map((section, s) => {
      return section.urls.map((url, i) => {
        return fetch(url.route, {
          mode: "no-cors"
        }).then((r) => ({
          fetch: r,
          index: i,
          sectionId: s
        }));
      });
    });

    promises.forEach((promises2) => {
      Promise.all(promises2).then((result) => {
        const copyJsonData = [...jsonData];
        result.forEach(
          ({
            sectionId,
            index,
            fetch: {
              status,
              statusText
            }
          }) => {
            copyJsonData[sectionId].urls[index].status = status;
            copyJsonData[sectionId].urls[index].statusText = statusText;
          }
        );
        setData(copyJsonData);
      });
    });
  }, []);

  console.log(jsonData);

  return <div></div>;
};


ReactDOM.render( < App / > , document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

Answer 3

我不知道为什么您会使事情复杂化，请尝试将代码分开，以便可以理解和容易阅读。

无论如何，这就是我的做法。

const promises = [];
jsonData.map((section, s) => {
  section.urls.map((url, i) => {
    // create it here so the context gets in the right place.
    let data = {
      index: i,
      sectionId: s,
    }
    // use push is more understandable
    promises.push(fetch(url.route, {
      mode: 'no-cors',
    }).then((r) => ({ ...data, fetch: r })));
  })
})