在搜索栏中提交查询（serp 格式）后，如何更新 React.js 中的 Bing Web API 搜索结果

Question

我正在使用 Bing Web 搜索 API，并且在我创建的搜索栏中输入查询时正在访问数据。但在提交搜索栏查询时，我无法获取要在搜索结果中显示的数据。我正在尝试访问“webPages”内部“value”中的元素，如下图所示： 【搜索引擎数据】：

必应网络搜索：https://learn.microsoft.com/en-us/bing/search-apis/bing-web-search/reference/endpoints

如果有人可以提供详细答复，我们将不胜感激！

useSearch.js：

import { useState, useEffect } from 'react';
import axios from 'axios';

const BASE_URL = 'https://api.bing.microsoft.com/v7.0/search';
const API_KEY = '0760f20a58f340a4ba3ce10857c43142'

const useSearch = ( {searchTerm} ) => {
    const [data, setData] = useState('');


    useEffect(() => {
        const fetchData = async () => {
            if (!searchTerm) return;
            try {
                const response = await axios.get(`${BASE_URL}`, {
                    headers: {
                        'Ocp-Apim-Subscription-Key': API_KEY,
                    },
                    params: {
                        'q': `${searchTerm}`,
                        'count': 10,
                        'mkt': 'en-us',
                    },
                });
                setData(response.data);
                // shows data from search bar
                console.log(response.data);

            } catch (error) {
                console.error('Error fetching data:', error);
            }
        };
        fetchData();
    }, [searchTerm]);

    return data;

};

export default useSearch;

SearchResults.js：

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import TileItems from './TileItems';
import VideoItems from './video';
import NavBar from './Navbar/Nav';
import Nav from '../Components/Navbar/Nav';
import useSearch from './UseSearch';

const SearchResults = () => {
    const [theme, setTheme] = useState('light');
    const [video, setVideo] = useState(null);
    const [ad, setAd] = useState(null);
    const [searchData, setSearchData] = useState('');
    const { data } = useSearch({ searchTerm: searchData });

    return (
      <div className=''>
        <main className={`main-container ${theme}`}>
          <section className="eighty" id="item-tiles">
            <h1>Search Results</h1>
            {searchData ? (
                <ul>
                  {searchData.map((i) => (
                      <TileItems
                          key={i.id}
                          image={i.thumbnailUrl}
                          title={i.name}
                          description={i.snippet}
                          website={i.url}
                      />
                  ))}
                </ul>
                ) : (
                  <p>Loading...</p>
                )}
          </section>
          <section id="item-tiles-right" className="twenty">
            <h2 id='col-2-header'>News</h2>
               {video ? (
                  <ul>
                    {/* this section is still under development */}
                    {video.map((v) => (
                        <iframe
                          id='ytplayer'
                          src={v.contentUrl}
                          frameborder='0'
                          allow='autoplay; encrypted-media'
                          width='100%'
                          height='360'
                          title='video'
                        />
                     ))}
                  </ul>
                  ) : (
                    <p>Loading...</p>
                  )}
          </section>
        </main>
      </div>
  );
};

Nav.js：

import React, { useState } from 'react';
import './NavBar.css';
import logo_light from '../../assets/spigot-logo.png';
import logo_dark from '../../assets/logo_light2.png';
import search_icon_light from '../../assets/search-w.png';
import search_icon_dark from '../../assets/search-b.png';
import toggle_light from '../../assets/night.png';
import toggle_dark from '../../assets/day.png';
import useSearch from '../UseSearch';


function NavBar({theme, setTheme, setSearchTerm}) {
  const [searchQuery, setSearchQuery] = useState('');
  const { data } = useSearch({ searchTerm: searchQuery});
  // console.log(setSearchQuery);

  /* ternary clause to change theme between light and dark mode */
  const toggle_mode = () => {
    theme == 'light' ? setTheme('dark') : setTheme('light');
  }

  return (
    <div className='navbar' >
        <img src={theme == 'light' ? logo_light : logo_dark} alt='' className='logo' />
        <ul className='nav-list'>
          <li>SEARCH</li>
        </ul>
      <div className='search-box'>
        <form>
           <input  className='search-bar' type='text' placeholder='Search' onChange={(e) => 
            setSearchQuery(e.target.value)}></input>
        </form>
        <img className='search-icon' src={theme == 'light' ? search_icon_light : 
           search_icon_dark} alt='' />
      </div>
        <img onClick={() => {toggle_mode()}} src={theme == 'light' ? toggle_light : 
           toggle_dark} alt='' className='toggle-icon'></img>
    </div>
  )
}

export default NavBar

Answer 1

从

useSearch

返回的数据需要是一个数组才能映射它，因此在

useSearch

挂钩中，如果您只想渲染结果，则只需获取

value

数组。

// in useSearch hook
// we only take the array of webpages value
// looking from your console.log screenshot
  setData(response.data.webPages.value);

您正在尝试映射您的

searchData

，它是一个字符串。为了让您映射实际的 api 数据，您需要使用来自

的数据

   // this is the API data
    const { data } = useSearch({ searchTerm: searchData });

    // replace searchData with data
   {data ? (
                <ul>
                  {data.map((i) => (
                      <TileItems
                          key={i.id}
                          image={i.thumbnailUrl}
                          title={i.name}
                          description={i.snippet}
                          website={i.url}
                      />
                  ))}
                </ul>
                ) : (
                  <p>Loading...</p>
                )}

让我知道这是否可以解决您的问题