尝试使用 React Hooks 将 API 值附加到受控输入字段

Question

加载组件时，我正在对 Geolocation API 进行 axios 调用。如果用户同意让应用程序获取他们的位置，它就会获取他们的邮政编码。然后我试图将邮政编码附加到邮政编码输入字段，但我不知道该怎么做。这是我的着陆页。

import React, { useState, useEffect, useRef } from 'react';
import './App.scss';
import axios from 'axios';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBars } from '@fortawesome/free-solid-svg-icons';
import LandingPage from './components/landingPage';

function App() {
  const[zipcode, setZipcode] = useState();
  
  useEffect(() => {
    axios({
      "method":"GET",
      "url":"https://find-any-ip-address-or-domain-location-world-wide.p.rapidapi.com/iplocation",
      "headers":{
        "content-type":"application/octet-stream",
        "x-rapidapi-host":"find-any-ip-address-or-domain-location-world-wide.p.rapidapi.com",
        "x-rapidapi-key":x-rapidapi-key,
        "useQueryString":true
      },
      "params":{
        "apikey":apikey
      }
    })
    .then((response)=>{
      console.log(response.data.zipCode);
      setZipcode(response.data.zipCode);
    })
    .catch((error)=>{
      console.log(error)
    });
  },[]);

  return (
    <div className="App" path='/'>
      <header className='container'>
        <div className='row'>
          <div className='col-1'>
            <button>
              <h1><FontAwesomeIcon icon={faBars} /></h1>
            </button>
          </div>
          <div className='col'>
            <h1>MDNight</h1>
          </div>
        </div>
      </header>
      <LandingPage zipcode={zipcode} setZipcode={setZipcode} />
      <footer className='container'>
        <h2>Copyright 2020</h2>
      </footer>
    </div>
  );
}

export default App;

这是子组件。

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function LandingPage(props) {

  function handleInputChange(e) {
    props.setZipcode(e.target.value);
  };

  return (
      <main className='container'>
        <div className='row'>
          <div className='col'>
            <h1>Welcome to <span>MDNight</span>!</h1>
            <h2>The website that makes your date night more convenient.</h2>
            <p>Let's assume that you and your "Significant Other" would like to go out for a date night, however, you have to continually switch back and forth between websites looking at showtimes and trying to find a place to eat beforehand. Well, that's where <span>MDNight</span> comes in! We take your location, movie you're interested in seeing, , and show you theaters that are showing your movie, and a list of restaurants nearby. Sound Convenient to you? Enter your info below to get started!</p>
          </div>
        </div>
        <div className='row'>
          <div className='col'>
            <label htmlFor='zipcodeInput'>Please Enter Your zipcode to get started!</label>
          </div>
        </div>
        <div className='row'>
          <div className='col'>
            <input name='zipcodeInput' type="text" value={props.zipcode} onChange={handleInputChange} />
          </div>
        </div>
        <div className='row'>
          <div className='col'>
            <button className='btn btn-primary'>Get Started!</button>
          </div>
        </div>
      </main>
  );
}

export default LandingPage;

我只用过 useState 和 useEffect，所以我不知道其他 hook 是否解决了这个问题，但如果有人能告诉我那会是多么惊人。

Answer 1

您不需要 zipcode 作为 App 组件中 useEffect 挂钩的依赖项。我建议使用一个空数组作为依赖项数组，因为您希望此挂钩仅在挂载时运行。

Answer 2

我从 React FB 小组的某个人那里找到了这个答案。我在输入中添加了 defaultValue={props.zipcode} 并且效果很好。直到今天我才知道 defaultValue。

尝试使用 React Hooks 将 API 值附加到受控输入字段

Trying to append an API value to a controlled input field with React Hooks

api

input-field

reactjs

react-hooks