React中使用map方法渲染JSON API数据的语法问题求助

Hey there! Let's walk through the issues in your current code and fix them to properly render your JSON API data.

First, let's spot the key problems in your existing code: #

• You're trying to render an entire object (cloudData) directly in JSX, which will just show [object Object] instead of the actual data.
• You're storing pre-rendered JSX in your state instead of keeping the raw API data. State should hold data, not UI elements—let the render() method handle creating JSX from state.
• You're missing a unique key prop on your mapped elements, which React requires for efficient re-rendering.
• You haven't handled the nested data_centers array, so those won't show up at all.

Here's the corrected implementation: #

First, update your componentDidMount to store the raw API data in state (not JSX):

constructor(props) {
  super(props);
  this.state = { clouds: [] };
}

componentDidMount() {
  const url = "<api url>";
  fetch(url)
    .then(response => response.json())
    .then(rawData => {
      // Store the raw JSON data in state, not pre-rendered JSX
      this.setState({ clouds: rawData });
      console.log("Fetched data:", rawData);
    })
    .catch(error => {
      // Don't forget to handle errors!
      console.error("Error fetching data:", error);
    });
}

Then, in your render() method, map over the state data and render each field (including the nested data_centers):

render() {
  return (
    <div className="cloud-container">
      {/* Map over each cloud in state */}
      {this.state.clouds.map((cloud, cloudIndex) => (
        <div key={`cloud-${cloudIndex}-${cloud.cloud}`} className="cloud-card">
          <h2>Cloud Region: {cloud.cloud}</h2>
          
          <div className="availability">
            <h3>Overall Availability</h3>
            <p>Last 15 Minutes: {cloud.availability.last15Min}</p>
            <p>Last 24 Hours: {cloud.availability.last24Hour}</p>
          </div>

          <div className="data-centers">
            <h3>Data Centers</h3>
            {/* Map over the nested data_centers array */}
            {cloud.data_centers.map((dc, dcIndex) => (
              <div key={`dc-${cloud.cloud}-${dcIndex}-${dc.title}`} className="data-center-card">
                <p>Name: {dc.title}</p>
                <p>15min Availability: {dc.availability.last15Min}</p>
                <p>24hr Availability: {dc.availability.last24Hour}</p>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

Let's explain the key changes: #

1. Storing raw data in state: We keep the original JSON array in this.state.clouds—this makes it easier to update or manipulate the data later if needed.
2. Rendering specific fields: Instead of trying to render the whole object, we explicitly access properties like cloud.cloud, cloud.availability.last15Min, etc.
3. Nested map() for data_centers: Since data_centers is an array inside each cloud object, we use a second map() call to render each data center's details.
4. Unique key props: We create unique keys using a combination of the cloud region, index, and data center title. This helps React track which elements have changed, been added, or removed.
5. Error handling: Added a .catch() block to handle any network errors when fetching the API data—always good practice!

Quick tips for React beginners working with API data: #

• Always validate that your state data exists before mapping (you can use optional chaining like this.state.clouds?.map(...) or check if the array is non-empty to avoid errors while the data loads).
• Keep your state focused on data, not UI. The render() method is where you convert data into JSX.
• Use descriptive class names (like cloud-card) to style your components easily with CSS.

内容的提问来源于stack exchange，提问作者Bhawna