React新手求助：如何从Node.js后端JSON生成数组并表格展示

Hey there! Let's get your certificate data displayed in a proper table—here's how to tackle this step by step, since you're already set up with a Node backend serving that JSON.

Step 1: Update Your Component State #

First, instead of tracking individual name, state, and days fields, you'll want to store an array of certificate objects. This lets you handle all the entries from your JSON response.

Update your state initialization like this:

class App extends Component {
  state = {
    certificates: [], // Store all certificate data here
    isLoading: true, // Optional: Track loading state
    error: null // Optional: Track request errors
  };
  // ... rest of your component
}

Step 2: Fetch Data & Convert the JSON Object to an Array #

When your component mounts, make the request to your Node backend. Once you get the response, use Object.values() to convert your JSON object (with keys like cert1, cert2) into an array of certificate objects.

Add this lifecycle method to your component:

componentDidMount() {
  // Replace with your actual backend endpoint
  fetch('http://your-node-api-url/certificates')
    .then(response => {
      if (!response.ok) {
        throw new Error('Failed to fetch data');
      }
      return response.json();
    })
    .then(data => {
      // Convert the object to an array using Object.values()
      const certArray = Object.values(data);
      this.setState({
        certificates: certArray,
        isLoading: false
      });
    })
    .catch(error => {
      this.setState({
        error: error.message,
        isLoading: false
      });
    });
}

Step 3: Render the Table #

Now you can map over the certificates array in your render method to build the table rows. Add some conditional rendering to handle loading states or errors too.

Here's how your render method might look:

render() {
  const { certificates, isLoading, error } = this.state;

  if (isLoading) {
    return <div>Loading certificate data...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div className="cert-table-container">
      <h2>Certificate Status</h2>
      <table border="1" cellPadding="8" cellSpacing="0">
        <thead>
          <tr>
            <th>Domain Name</th>
            <th>Status</th>
            <th>Valid Days Remaining</th>
          </tr>
        </thead>
        <tbody>
          {certificates.map((cert, index) => (
            <tr key={index}>
              <td>{cert.name}</td>
              <td>{cert.state}</td>
              <td>{cert.days}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

Quick Notes: #

• Using index as the key is okay here since your certificate list doesn't have unique IDs in the current JSON. If you can add a unique id field to each certificate object later, that's better practice.
• The border, cellPadding, and cellSpacing attributes are just for quick styling—you can replace them with CSS classes for better design.
• Make sure your Node backend is configured to allow CORS if your React app is running on a different port (e.g., React on 3000, Node on 5000).

That's it! This will take all the entries from your JSON response, convert them into an array, and display them neatly in a table.

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