Reactjs 传递数据和验证api调用

我正在开发一个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>
  )
}
}

从“React”导入React
从“../components/Forecast”导入预测；
导出默认类表单扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
zipCode:“”
}
}
handleSubmit=e=>{
e、 预防默认值（）
this.setState（{zipCode:''}）；
}
render（）{
const{zipCode}=this.state
返回(
输入Zipcode
this.setState（{zipCode:e.target.value}）
/>
提交
{`
身体{
高度：100vh；
宽度：100vw；
}
.标题{
颜色：#fff；
字号：600；
字体系列：'Apercu'，'sans serif'；
}
div{
边缘顶部：300px；
}
@介质（最大宽度：600px）{
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>
  )
}
}

import React，{Component}来自“React”
从“axios”导入axios；
导出默认类Forecast.Component{
静态异步getInitialProps（）{
const res=等待axios.get(`https://api.openweathermap.org/data/2.5/forecast?zip=${this.props.zipcode}&APPID=6f9e2f1d20bef61a529b8dbdb3fd82ae&units=metric`）；
console.log（res.data）
返回{weather:res.data}；
}
render（）{
const{weather}=this.props；
console.log（this.props）
返回(
这是你的5天预测

1{weather}
2
3
4
5

{`
身体{
高度：100vh；
宽度：100vw；
}
.集装箱——第二节{
边缘顶部：500px；
}
.标题——第二节{
颜色：#fff；
字体系列：“Tiempos标题”，无衬线；
字体风格：普通；
字体大小：300；
}
.柔性包装{
填充：0；
保证金：0；
列表样式：无；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
证明内容：周围的空间；
}
.弹性项目{
背景：rgba（255，255，255，0.4）；
填充物：5px；
宽度：200px；
高度：250px；
边缘顶部：10px；
线高：150px；
颜色：#fff；
字体大小：粗体；
字号：3em；
文本对齐：居中；
盒影：0 2px 8px 0#fff；
}
div{
边缘顶部：60像素；
边缘底部：250px；
}
@介质（最大宽度：600px）{
div{
背景：蓝色；
}
}
`}
)
}
}

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

我已经制作了一个小的代码沙盒，其中有一些小的修改，希望能帮助您上路。现在，weather response对象被打印到控制台（您可以在右下角打开它）：

以下方法是错误的

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文档中有关组件生命周期的部分。具体来说，就是为了这个目的而做的，并在我的代码沙盒中使用

祝你好运

---

James

您的代码是正确的。此代码确实有效，但不适用于“我的地图”功能。将数据推送到weather:{}之后，我希望遍历它，以便显示内容。我认为渲染存在一个问题，它不允许使用这种类型的功能。有什么想法吗？？？