Передать реквизит с состоянием связи в React

Question

Я пытаюсь передать реквизиты через состояние Link следующему компоненту, но значение равно undefined.

class Weather extends Component {
  state = {
    temp1: undefined
  };

  weatherSubmit = async event => {
    event.preventDefault();
    const api_call = await fetch(
      "https://api.openweathermap.org/data/2.5/weather?q=London&apikey=########################"
    );
    const data = await api_call.json();

    this.setState({
      temp1: data.main.temp
    });
    console.log(this.state.temp1);
  };

  render() {
    return (
      <div className="container-weather">
        <form onSubmit={this.weatherSubmit}>
          <label>Input location Name: </label>
          <input type="text" name="weatherInput" />
          <button type="submit">
            <Link
              to={{
                pathname: "/WeatherResult",
                state: { temp1: this.state.temp1 }
              }}
            >
              Submit
            </Link>
          </button>
        </form>
      </div>
    );
  }
}

Здесь temp1 значение равно undefined, где console.log inweatherSubmit дает значение.

class WeatherResult extends Component {
  state = {};
  render() {
    console.log(this.props.temp1);
    return (
      <div className="container">
        <p>Weather: </p>
        <p>{this.props.temp1}</p>
      </div>
    );
  }
}

Answer 1

Когда вы передаете данные в Link как,

<Link
   to={{
       pathname: "/WeatherResult",
       state: { temp1: this.state.temp1 }
   }}
>

Вы можете извлечь данные в целевом компоненте как,

this.props.location.state.temp1

Примечание: Еслиthis.state.temp1 - сложный объект, тогда его можно привести в строковое значение.

<Link
   to={{
       pathname: "/WeatherResult",
       state: { temp1: JSON.stringify(this.state.temp1) }
   }}
>

В целевом компоненте вы можете получить его следующим образом:

const temp1 = JSON.parse(this.props.location.state.temp1) 

Упрощенная демонстрация

---

Обновление

Если при доступе к объекту location по-прежнему возникает ошибка, возможно, вы используете react-router-dom v3.В этой версии вам нужно обернуть ваш компонент, используя withRouter HOC.

import { withRouter } from 'react-router-dom'

class WeatherResult extends Component { ... }

export default withRouter(WeatherResult)

---

Обновление 2

Вы обернули button, используя Link,

<button type="submit">
  <Link
    to={{
      pathname: "/WeatherResult",
      state: { temp1: this.state.temp1 }
    }}
  >
    Submit
  </Link>
</button>

И вы получаете данные в переменной состояния temp1 после отправки формы с использованием функции weatherSubmit.

Таким образом, как только вы нажмете кнопку отправки, он не заблокирует выполнение для завершения выполнения функции weatherSubmit и перейдет непосредственно к целевому компоненту с путем "/WeatherResult".Таким образом, в этом случае ваша функция weatherSubmit не выполняется, и вы получаете начальное значение состояния в целевом компоненте, т.е. undefined (начальное состояние).

Решение состоит в том, чтобы не переносить кнопку с помощью Link, держите это просто кнопка

<button type="submit">
   Submit
</button>

Вы можете перемещаться после того, как ваша функция weatherSubmit вернет успех, и ваше состояние temp1 будет успешно установлено с помощью обратного вызова в setState.

this.setState({
    temp1: data.main.temp
}, () => this.props.history.push({
     pathname: '/WeatherResult',
     state: { temp1: JSON.stringify(this.state.temp1) }
}));