传递数据并验证 api 调用

Question

我正在开发一个 Next.js 应用程序，该应用程序使用表单来捕获州内的用户邮政编码。我正在尝试将邮政编码值作为道具从父组件（Form.js）传递给子组件（Forecast.js）。这种方法似乎不起作用。目标是将数据传递给 Forecast 组件，以便我可以进行 api 调用。我希望有人能提供一些建议让数据流传下来。

请注意数据没有被传递，对端点的调用也没有工作。

Form.js

import React from 'react'

import Forecast from '../components/Forecast';



 export default class Form extends React.Component {
   constructor(props) {
   super(props)

   this.state = {
    zipCode: ''
   }
 }


handleSubmit = e => {
  e.preventDefault()
  this.setState({zipCode: ''});
}


render() {
  const{ zipCode } = this.state

  return (
    <div className="container">
      <div className="form-group">
        <h3 className="header">Enter your Zipcode</h3>
        <input
        type="text"
        className="form-control"
        placeholder="Zipcode"
        id="inputDefault"
        value={this.state.zipCode}
        onChange={e => this.setState({zipCode: e.target.value})}
        />
      </div>
      <button type="button" className="btn btn-success" onClick={this.handleSubmit}>Submit</button>
      <style jsx>{`
        body {
          height: 100vh;
          width: 100vw;
        }

        .header{
          color: #fff;
          font-weight: 600;
          font-family: 'Apercu', 'sans-serif';
        }
        div {
          margin-top: 300px;
        }
        @media (max-width: 600px) {
          div {
            background: blue;
          }
        }
    `}</style>
    <Forecast  zipcode={this.state.zipCode} />
    </div>
  )
}
}

Forecast.js

import React, {Component} from 'react'
import axios from 'axios';




export default class Forecast extends React.Component {

static async getInitialProps () {
  const res = await axios.get(`https://api.openweathermap.org/data/2.5/forecast?zip=${this.props.zipcode}&APPID=6f9e2f1d20bef61a529b8dbdb3fd82ae&units=metric`);
  console.log(res.data)
  return {weather: res.data};
}

render() {
  const { weather } = this.props;

  console.log(this.props)
  return (
    <div className="container--section-two">
      <h1 className="header--section-two"> Here is your 5-day Forecast</h1>
      <div>
        <ul className="flex-wrapper">
          <li className="flex-item">1{weather}</li>
          <li className="flex-item">2</li>
          <li className="flex-item">3</li>
          <li className="flex-item">4</li>
          <li className="flex-item">5</li>
        </ul>
      </div>
      <style jsx>{`

        body {
          height: 100vh;
          width: 100vw;
        }

        .container--section-two{
          margin-top: 500px;
        }

        .header--section-two{
          color: #fff;
          font-family: 'Tiempos Headline', sans-serif;
          font-style: normal;
          font-weight: 300;
        }

        .flex-wrapper {
          padding: 0;
          margin: 0;
          list-style: none;

          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;

          -webkit-flex-flow: row wrap;
          justify-content: space-around;
        }

        .flex-item {
          background: rgba(255, 255, 255, 0.4);
          padding: 5px;
          width: 200px;
          height: 250px;
          margin-top: 10px;

          line-height: 150px;
          color: #fff;
          font-weight: bold;
          font-size: 3em;
          text-align: center;
          box-shadow: 0 2px 8px 0 #fff;
        }

        div {
          margin-top: 60px;
          margin-bottom: 250px;
        }

        @media (max-width: 600px) {
          div {
            background: blue;
          }
        }
    `}</style>
    </div>
  )
}
}

Answer 1

首先做得很好！正如 Sulji.Warrior 所述，您的大部分代码都是正确的。

我编写了一个带有一些小修正的小代码和框，希望能帮助您继续前进。现在，天气响应对象被打印到控制台（您可以在右下角打开它）：

View on code sandbox

下面的方法是错误的

static async getInitialProps () {
  const res = await 
  axios.get(`https://api.openweathermap.org/data/2.5/forecast?zip=${this.props.zipcode}&APPID=6f9e2f1d20bef61a529b8dbdb3fd82ae&units=metric`);
  console.log(res.data)
  return {weather: res.data};
}

getInitialProps 是运行 ajax 请求的错误 'react' 方法。

我建议您阅读有关组件生命周期的 react-docs 部分。特别是 componentDidMount and componentWillReceiveProps 正是为此目的而制作的，并在我的 codesandbox 中使用。

祝你好运！

詹姆斯

传递数据并验证 api 调用

Passing data and verifying api call

reactjs

axios

next.js

react-props