不能超過類外變數的值

我有這個代碼，它將使用 Accuweather API 顯示一個地方的溫度。現在我已經硬編碼 newdelhi 到它來找到那個地方的天氣狀況。但我想通過使用表格來了解天氣。我知道使用名字輸入表單測驗它并嘗試在位置函式中發送該值是正確的。但我不能使用用戶提供的輸入并在課堂外使用它。需要幫忙。我是新來的，如果有人可以幫助我，我很感激。謝謝

import React ,{useState,useEffect,state}from 'react';
import './App.css';
const apikey='zVp5GoY9fbwt8h4u5CvcWwneD1emnMMD';

const getcity = async(city) => {
    const base = 'http://dataservice.accuweather.com/locations/v1/cities/search';
    const query = `?apikey=${apikey}&q=${city}`;
  
    const response = await fetch(base   query);
    const data = await response.json();
  
    return data[0];
  }

  getcity('New Delhi')
  .then(data => {
    return getweather(data.Key);
  }).then(data =>{
    console.log(data);
  })
  .catch(err =>console.error(err));

  const getweather = async(id)=>{
  
    const base= 'http://dataservice.accuweather.com/currentconditions/v1/';
    const query =`${id}?apikey=${apikey}`;
  
    const response = await fetch(base   query)
    const data = await response.json();
  
    return data[0];
  }
  let newval = "initial value";
  console.log(newval)

export default class CustomerForm extends React.Component {

  
    
    
  constructor(props) {
    super(props);
    

    this.state = {
      customer: {
        firstName: props.firstName,
        lastName: props.lastName,
        status: props.status,
        
      }
    } 
  }

  handleFirstNameChanged(event) {
    var customer        = this.state.customer;
    customer.firstName  = event.target.value;

    this.setState({ customer: customer });
  }

  handleLastNameChanged(event) {
    var customer      = this.state.customer;
    customer.lastName = event.target.value;

    this.setState({ customer: customer });
  }

  handleStatusChanged(event) {
    var customer    = this.state.customer;
    customer.status = event.target.value;
    this.setState({ customer: customer });
  }
  
  
  handleButtonClicked() {
    console.log(this.state.customer);
    newval=this.state.customer.firstName;
    console.log(newval);
  }
  
  render() {
    return (
      <div>
        <label>
          First Name: 
        </label>
        <input type="text" value={this.state.customer.firstName} onChange={this.handleFirstNameChanged.bind(this)}/>
        <br/>
        <label>
          Last Name:
        </label>
        <input type="text" value={this.state.customer.lastName} onChange={this.handleLastNameChanged.bind(this)}/>
        <br/>
        <label>
          Status:
        </label>
        <select value={this.state.customer.status} onChange={this.handleStatusChanged.bind(this)}>
          <option value="PENDING">
            Pending
          </option>
          <option value="APPROVED">
            Approved
          </option>
        </select>
        <hr/>
        <button onClick={this.handleButtonClicked.bind(this)}>
          Save Record
        </button>
      </div>
    );
  }
}

uj5u.com熱心網友回復：

在句柄更改函式中，您需要使用擴展運算子來更新狀態，而不僅僅是為其分配新值。

例如，handleFirstNameChanged嘗試這樣的事情：-

handleFirstNameChanged(event) {
 var customer = this.state.customer;
 customer.firstName  = event.target.value;
 this.setState({...this.state.customer,...customer });
}

這將更新您的狀態變數值。請參閱this以獲得更好的理解。

uj5u.com熱心網友回復：

你只需要在你的類中定義你的方法并在按鈕處理程式中呼叫它們，在此之前你需要在輸入句柄更改中更新狀態：

const apikey = "zVp5GoY9fbwt8h4u5CvcWwneD1emnMMD";

export default class WeatherForm extends React.Component {
  constructor(props) {
    super(props);
    
    this.handleLocationChanged = this.handleLocationChanged.bind(this);
    this.state = {
      location: props.location
    };
  }

  handleLocationChanged(event) {
    if (event.target.value) {
      this.setState((prevState) => ({
        ...prevState, //it's for the cases that use another state other than location
        location: event.target.value
      }));
    }
  }

  handleButtonClicked() {
    console.log(this.state.location);
    if (this.state.location){
      this.getcity(this.state.location)
      .then((data) => {
        console.log(this.getweather(data.Key));
      })
      .then((data) => {
        console.log(data);
      })
      .catch((err) => console.error(err));
    }
  }

  getcity = async (city) => {
    const base =
      "http://dataservice.accuweather.com/locations/v1/cities/search";
    const query = `?apikey=${apikey}&q=${city}`;

    const response = await fetch(base   query);
    const data = await response.json();

    return data[0];
  };

  getweather = async (id) => {
    const base = "http://dataservice.accuweather.com/currentconditions/v1/";
    const query = `${id}?apikey=${apikey}`;

    const response = await fetch(base   query);
    const data = await response.json();

    return data[0];
  };

  render() {
    return (
      <div>
        <label>location:</label>
        <input type="text" onChange={this.handleLocationChanged} />
        <br />
        <hr />
        <button onClick={this.handleButtonClicked.bind(this)}>search</button>
      </div>
    );
  }
}

標籤：javascript 反应 接口

上一篇：當我嘗試在Firebase上讀取我的資料時，我收到“未捕獲的ReferenceError：firebase未定義”錯誤

下一篇：使用js將選定的<li>復制到另一個<ul>