React-無法使用在容器組件中定義的 function 從子組件更改 state

Question

這是我的容器組件：

 import React, {useState} from 'react';
import Search from '../components/Search';
import Weather from '../components/Weather';
import Location from '../components/Location';
import 'tachyons';


const api = {
  key: '1e96cf99930c0192bd53fe21fa67fbc1',
  base: 'https://api.openweathermap.org/data/2.5/weather'
}


const App = () => {
  const [query, setQuery] = useState('q');
  const [weather, setWeather] = useState({});


  const getWeather = (e) => {
    if (e.key === 'Enter') {
      setQuery(e.target.value);
      fetch(`${api.base}?q=${query}&units=imperial&APPID=${api.key}`)
        .then(res => res.json())
        .then(data => {
          setWeather(data);
          setQuery('');
          console.log(data);
        });
    }
  }


  return (
    <div className="app tc">
      <div className="search-box">
        <Search getWeather={getWeather} />
      </div>
    </div>
  );
}

export default App;

這是我的子組件：

import React from 'react';


const Search = ({ getWeather }) => {
  return (
    <input type="search" className="search-bar" onKeyPress={getWeather} />
  );
}

export default Search;

我遇到了一個問題，即使 getWeather function 在按鍵上運行，它也不會改變天氣或查詢的 state。 萬一我做錯了什么？

提前謝謝大家！

Answer 1

按下回車鍵時，您正在設置查詢。 將其移動到搜索組件並在那里更新值。

const Search = ({ getWeather, onChange }) => {
  return (
    <input type="search" onChange={(e) => onChange(e.target.value)} className="search-bar" onKeyPress={getWeather} />
  );
}

在您的搜索組件中執行，並從 getWeather 中刪除 setQuery。

<Search onChange={setQuery} getWeather={getWeather} />

 // Get a hook function const {useState, useEffect} = React; const api = { key: '1e96cf99930c0192bd53fe21fa67fbc1', base: 'https://api.openweathermap.org/data/2.5/weather' } const Search = ({ getWeather, onChange }) => { return ( <input type="search" onChange={(e) => onChange(e.target.value)} className="search-bar" onKeyPress={getWeather} /> ); } function App(){ const [query, setQuery] = useState('q'); const [weather, setWeather] = useState({}); const getWeather = (e) => { if (e.key === 'Enter') { fetch(`${api.base}?q=${query}&units=imperial&APPID=${api.key}`).then(res => res.json()).then(data => { setWeather(data); setQuery(''); console.log(data); }); } } return ( <div className="app tc"> <div className="search-box"> <Search onChange={setQuery} getWeather={getWeather} /> </div> </div> ); } // Render it ReactDOM.render( <App />, document.getElementById("react") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="react"></div>