React中如何将resultInfo数组映射生成指定锚点标签？

直接修改resultInfo.map的回调函数，通过数组解构获取每个子数组的标题和链接，生成对应的<a>标签即可，同时记得添加React列表渲染必需的key属性：

const results = data.query.search.map((option) => [
  option.title,
  option.url
]);
setResultInfo(results);
};
return (
  <div>
    <form onSubmit={searchQuery}>
      <input placeholder='search wikipedia' onChange={searchField}></input>
      <input type='image' value='search'></input>
    </form>
    {resultInfo.map(([title, url], index) => (
      <a key={index} href={url} target="_blank" rel="noopener noreferrer">
        {title}
      </a>
    ))}
  </div>
);
};

说明： #

• 使用数组解构[title, url]直接提取每个子数组的两个元素，分别作为锚点的文本内容和href属性值
• 添加key={index}满足React列表渲染的要求（如果数据中有唯一标识字段，比如option.pageid，建议用该字段作为key，比index更稳定）
• 额外添加target="_blank"和rel="noopener noreferrer"是为了让链接在新标签页打开，同时避免安全风险，可根据需求选择是否保留

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