React图片画廊应用搜索栏功能故障求助

问题排查与修复 #

1. 表单默认提交未阻止
   搜索组件的onSubmit函数中，e.preventdefault()拼写错误，正确写法是e.preventDefault()（注意default首字母大写）。这个错误会导致表单提交时触发页面刷新，React状态被重置，搜索请求无法正常生效。

2. 输入框无效属性
   输入框标签里混入了无效的npm run build字符串，需删除该内容，保留正确的type="search"属性。无效属性会导致输入框渲染异常，影响输入功能。

修改后的Search组件代码 #

import React, { useState } from 'react'

const Search = ({ searchText }) => {
  const [text, setText] = useState('');  

  const onSubmit = (e) => {
    e.preventDefault(); // 修正拼写错误
    searchText(text);
  } 

  return (
    <div className='mt-7 mb-7'>
      <form onSubmit={onSubmit} className="max-w-md mx-auto">
        <label htmlFor="default-search" className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
        <div className="relative">
          <div className="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
            <svg className="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
            </svg>
          </div>
          {/* 删除无效的npm run build字符串 */}
          <input onChange={e => setText(e.target.value) } type="search" id="default-search" className="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search anything" required />
          <button type="submit" className="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Search</button>
        </div>
      </form>
    </div>
  )
}

export default Search;

可选优化（非必要） #

App组件中，当term为空时会触发初始请求，若想避免空搜索，可在useEffect中添加判断：

useEffect(() => {
  // 仅当term不为空时发起请求
  if (term.trim()) {
    fetch(`https://pixabay.com/api/?key=43750982-cccb38e876ce2f6037a8568fd&q=${term}&image_type=photo&pretty=true`)
      .then(response => response.json())
      .then(data => {
        setImages(data.hits);
      })
  }
}, [term]);

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