如何将JSON中的链接传递到React组件并实现正常跳转？

Hey there! Let's break down what's going wrong and fix this issue for you. The problems you're seeing (links not working + unexpected component reloads) come from two main gaps in your current code: incorrect link binding and missing unique keys for your list items. Here's how to fix it step by step:

1. Correctly Bind the JSON Link to the <a> Tag #

First, your <a> tag isn't actually using the post.link value right now—you've got placeholder text instead. You need to set the href attribute dynamically with curly braces, and add visible text inside the tag so users can click it.

2. Add Unique Keys to Prevent Unnecessary Reloads #

When rendering lists in React, you must provide a key prop to each item in the list. Without this, React can't track which items are unique, so it re-renders the entire list (and your component) unnecessarily. Since your JSON doesn't have unique IDs, we'll use the array index as a fallback (note: if you ever add unique id fields to your JSON later, switch to those instead for better performance).

3. Handle Empty Links (Optional but Recommended) #

Since your JSON has empty link values right now, it's good practice to hide the <a> tag or disable it when there's no valid URL to avoid broken interactions.

Modified React Code #

import React from 'react';
import productdb from './productdb.json';

function App() {
  return (
    <div className="App">
      <div className="posts">
        {productdb.map((post, index) => {
          return (
            // Add unique key using index (replace with a unique ID if you have one later)
            <div key={index} className="post-item">
              <h4>{post.name}</h4>
              <p>{post.desc}</p>
              <p>{post.price}</p>
              {/* Only render the link if post.link is not empty */}
              {post.link && (
                <a 
                  href={post.link} 
                  target="_blank" // Optional: opens link in new tab
                  rel="noopener noreferrer" // Security best practice for external links
                >
                  View Product {/* Add clickable text here */}
                </a>
              )}
            </div>
          )
        })}
      </div>
    </div>
  )
}

export default App;

Key Explanations: #

• Dynamic href Binding: href={post.link} correctly pulls the URL from your JSON data into the anchor tag.
• Unique key Prop: key={index} helps React efficiently update only the items that change, eliminating unwanted component reloads.
• Conditional Link Rendering: {post.link && ...} ensures we don't render a broken empty link when post.link is blank.
• Clickable Text: Adding "View Product" inside the <a> tag gives users a visible target to click (your original code had an empty anchor tag, which was unclickable!).

Once you add valid URLs to your link fields in the JSON, this code will work as expected—links will navigate to the correct address, and your component won't reload unnecessarily.

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