React-无法使用容器组件中定义的功能更改子组件的状态

debugcn 发表于 Dev

本杰明

这是我的容器组件：

 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函数在按键上运行，也不能更改天气或查询的状态。万一我做错了什么？

提前谢谢大家！

六月

按Enter键时，您正在设置查询。将其移动到搜索组件并在那里更新值。

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。