React 在不同组件中使用 state

Question

I am creating weather app. I have a 'search' component for (my form, axios )and in this component i store my data in state. When I submit this form I want to load ANOTHER PAGE with next component.. and my question is how can i use data from 'search component' in other component which will be load when the form will submit So basically i want to submit my form then reload another page with Weather Component and then i want to move my data from Search to Weather Component. In Weather component a will set my background and other data

 mport React, { Component } from 'react'; import axios from 'axios'; const KEY = 'fdc0a9d5321ee73e70535ed7d7e052ce' class Search extends Component { state = { value: null, city: null, temp: null } onChange = (e) => { this.setState({ value: e.target.value }) } onSubmit = e => { e.preventDefault() axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${this.state.value}&appid=${KEY}&units=metric`).then(res => { this.setState({ city: this.state.value, temp: res.data.main.temp }) console.log(this.state) }) } render() { return ( <div className="Search"> <form onSubmit={this.onSubmit}> <input onChange={this.onChange}></input> <button>Submit</button> </form> </div> ) } } export default Search import React from 'react'; const Weather = () => { return ( <div> <h1>Lorem</h1> </div> ) } export default Weather

Answer 1

You can try toggling the component to achieve this. Try something like this

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


const KEY = 'fdc0a9d5321ee73e70535ed7d7e052ce'


class Search extends Component {
    state = {
        value: null,
        city: null,
        temp: null
    }
    onChange = (e) => {
        this.setState({
            value: e.target.value
        })
    }
    onSubmit = e => {
        e.preventDefault()
        axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${this.state.value}&appid=${KEY}&units=metric`)
            .then(res => {
                this.setState({
                    city: this.state.value,
                    temp: res.data.main.temp
                })
    const data={
                    city: this.state.value,
                    temp: res.data.main.temp
                }
    this.props.callback(data)
                console.log(this.state)
            })
    }

    render() {
    return (
       
            <div className="Search">
                 <form onSubmit={this.onSubmit}>
                    <input onChange={this.onChange}></input>
                    <button>Submit</button>
                 </form>
                 
            </div>
        
    )
}
}
export default Search

import React from 'react';
import Search from './Search'

const Weather = () => {
const[formSubmitted,setFormSubmitted]=useState('false)
        
    const callBackHandler=(data)=>{
      setFormSubmitted(true)
       //do something with the data
    }
    return (
        <div>
    {formSubmitted? <h1>Lorem</h1>:<Search callback={(data)=>callBackHandler(data)}/>}
          
            
        </div>
    )
}

export default Weather