React输入框更新state报错，求onKeyPress替代方案及JSON打印方法

1. 修复city is undefined错误 #

问题根源是useState解构语法错误：useState返回的是数组而非对象，必须用数组解构才能正确获取状态值和更新函数。

// 错误写法
const {data,setData} = useState({})
const {city,setCity} = useState('')

// 正确写法
const [data, setData] = useState({})
const [city, setCity] = useState('')

2. onKeyPress的替代方案 #

onKeyPress兼容性有限，推荐两种更可靠的实现方式：

方案一：改用onKeyDown #

function searchCity(event){
  if(event.key === 'Enter') {
    axios.get(`http://api.weatherapi.com/v1/current.json?key=e893692528f845dfad844704220412&q=${city}&aqi=yes`)
      .then((response) => {
        setData(response.data)
        console.log(response.data)
      })
      .catch(err => console.error('请求出错:', err)) // 新增错误捕获
  }
}

// 输入框修改为
<input
  value={city}
  onChange={event => setCity(event.target.value)}
  onKeyDown={searchCity}
  placeholder='Enter City'
  type="text"
/>

方案二：添加搜索按钮（更友好的交互） #

const handleSearch = () => {
  if(!city.trim()) return; // 空输入不发起请求
  axios.get(`http://api.weatherapi.com/v1/current.json?key=e893692528f845dfad844704220412&q=${city}&aqi=yes`)
    .then((response) => {
      setData(response.data)
      console.log(response.data)
    })
    .catch(err => console.error('请求出错:', err))
}

// 输入框+按钮组合
<div className='form'>
  <input
    value={city}
    onChange={event => setCity(event.target.value)}
    placeholder='Enter City'
    type="text"
  />
  <button onClick={handleSearch}>搜索天气</button>
</div>

3. 打印请求返回的JSON数据 #

你已在then回调中写了console.log(response.data)，可以优化打印格式让JSON更易读：

// 格式化打印，控制台会展示可折叠的JSON树
console.log('天气数据:', JSON.stringify(response.data, null, 2))
// 或直接打印对象，控制台支持展开查看细节
console.log('天气数据:', response.data)

打开浏览器开发者工具（F12），切换到Console标签页即可查看打印的JSON数据。

额外优化：动态更新请求URL #

原代码中url变量仅在组件初始化时计算一次，不会随city变化更新，建议直接在请求时动态拼接URL：

// 发起请求时直接拼接
axios.get(`http://api.weatherapi.com/v1/current.json?key=e893692528f845dfad844704220412&q=${city}&aqi=yes`)

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