反应搜索栏无法从 API 中选择数据

如何解决反应搜索栏无法从 API 中选择数据

我的 React Searchbar 出现了一些问题，但我不明白为什么。该应用程序非常简单，它只是从 API 获取一些数据，并将其显示在输入下。我要实现的下一件事是，我可以单击“内容”，然后它就会进入搜索栏。我想用 onClick 事件处理它，但每次我想执行它时，我都会收到一个错误，我的函数（选择）未定义。我猜股票符号的渲染有问题。我是一个反应/编程初学者，所以我很感激每一种形式的帮助:)

这是我的代码：

const Searchbar = () => {
const [stockSymbol,setStockSymbol] = useState('')




const searchInput = useRef();
const listSymbol = useRef();
const inputRef = useRef();
const results = useRef();
const API_KEY = "KT7CW1QXDZBDGCIH.";



useEffect(() => {
onChange();
},[stockSymbol])

//set Value of Input equal to selected Stock 
function select(element){
      let selectData = element.textContent
      inputRef.value = selectData
    }

 // Search Endpoint - Fetch Data from API

function onChange (){ 
   let APISymbol  = []
  
   
  if(stockSymbol !== '') {
   
    let API_Call = `https://www.alphavantage.co/query?function=SYMBOL_SEARCH&keywords=${stockSymbol}&apikey=${API_KEY}`

    fetch(API_Call)
    .then (function (response) {
        return response.json()
    }).then(function (data) {
        // get an Array of 5 suggestions

       for(var key=0; key < 5; key++){

         // push everything in Var APISymbol
           APISymbol.push(data['bestMatches'][key]['1. symbol'])
           console.log(key)
       }

       // Map through List of suggestions and transform them into HTML
       let stockList = APISymbol.map((data)=> {
         return data = `<li class="symbols" ref={listSymbol} onClick={select}>` + data + `</li>`
       })
       console.log(stockList)

       //add active so Symbol gets displayed
       document.getElementById('search-input').classList.add('active')

       // displays Symbol in Searchbar
       document.getElementById('results').innerHTML = stockList.join('')

    }).catch ((err) => alert(err) )
  }else{

  //if nothing is in Searchbar,don´t display it
document.getElementById('search-input').classList.remove('active') }
}



return (
        <div>
          <div ref={searchInput} id='search-input' className='search-input'> 
            <input ref = {inputRef} className = 'searchbar' type='text' placeholder='Searchbar...'  onKeyUp  = {(e) => {setStockSymbol(e.target.value.toUpperCase())}}/>
           {stockSymbol !== '' && <div ref={results} className="results" id='results'>
           
            </div>}
          </div>  
            
        </div>
    )
}

export default Searchbar

给你加油！

解决方法

您使用下面的代码，您不需要任何反引号 ` 和字符串连接，因为在 React 中这些是 jsx，它是 javascript 的包装器，因此纯写是正确的。

let stockList = APISymbol.map((data)=> {
         return <li class="symbols" ref={listSymbol} onClick={select}>data</li>;
       })

你采取另一种状态

const [apiSymbol,setApiSymbol ] = useState([])

function onChange (){ 
   let APISymbol  = []
  
   
  if(stockSymbol !== '') {
   
    let API_Call = `https://www.alphavantage.co/query?function=SYMBOL_SEARCH&keywords=${stockSymbol}&apikey=${API_KEY}`

    fetch(API_Call)
    .then (function (response) {
        return response.json()
    }).then(function (data) {
        // get an Array of 5 suggestions

       for(var key=0; key < 5; key++){

         // push everything in Var APISymbol
           APISymbol.push(data['bestMatches'][key]['1. symbol'])
           console.log(key)
       }

       setApiSymbol(prevData => APISymbol);

    }).catch ((err) => alert(err) )
  }else{

  //if nothing is in Searchbar,don´t display it
document.getElementById('search-input').classList.remove('active') }
}

const renderApiSymvbol = () => {
   return APISymbol.map((data)=> {
         return <li class="symbols" ref={listSymbol} onClick={select}>data</li>;
       })
}

返回块

return (
        <div>
          <div ref={searchInput} id='search-input' className='search-input'> 
            <input ref = {inputRef} className = 'searchbar' type='text' placeholder='Searchbar...'  onKeyUp  = {(e) => {setStockSymbol(e.target.value.toUpperCase())}}/>
           {stockSymbol !== '' && renderApiSymbol()}
          </div>  
            
        </div>
    )
}