ComponentWillMount 在 onclick 后再次渲染

Question

加载页面时 ComponentWillMount 触发 getLocalStorage 函数。这有几个检查并触发 search 函数。当您加载页面时，它会尝试从 localStorage 检索查询。当您更改输入（这会更改查询）并提交时，search 函数应该触发但不会获取..而是刷新页面并再次加载 componentDidMount？然后在刷新后它完美地工作。为什么只刷新一次？

componentWillMount(){
    this.getLocalStorage();
};

getLocalStorage = () => {
    //Check if localstorage is supported by browser
    if (typeof(Storage) !== "undefined") {

        //Check if localstorage item query is defined
        if (localStorage.getItem("query") !== null) {

            //Set query to localstorage item and go to search function
            //This works and triggers the search function
            this.setState({
                query: localStorage.getItem("query")
            },() => {
                this.search();
            });
        }

        // If localstorage item is not defined go to location
        else{
            this.getLocation();
        }
    }

    // If localstorage is not supported by the browser go to location
    else {
        this.getLocation();
    }
};

当您点击按钮时，它会触发搜索功能但不会获取。相反，它会再次触发 componentDidMount?

<input type="text" onChange={this.handleChange} placeholder="Find your location..."/>
<button onClick={this.search}>Submit</button>

搜索功能

search = () => {

    this.setState({
        secondLoader:true
    });

    let BASE_URL = "https://maps.googleapis.com/maps/api/geocode/json?";
    let ACCES_TOKEN = "token";
    let FETCH_URL = `${BASE_URL}address=${this.state.query}&key=${ACCES_TOKEN}`;

    alert('the search function does not fetch like below instead it trigger componentDidMount again');


    fetch(FETCH_URL, {
        method: "GET"

    })
        .then(response => response.json())
        .then(json => {
            //If repsonse got zero results use amsterdam location
            if(json.status === 'ZERO_RESULTS'){
                this.setState({
                    query: 'Amsterdam'
                });
            }

            //Otherwise use query
            else {
                const geocode = json.results[0].geometry.location;

                this.setState({
                    latitude: geocode.lat,
                    longitude: geocode.lng
                });
            }

            const BASE_URL = "https://api.darksky.net/forecast/";
            const ACCES_TOKEN = "token";
            const FETCH_URL = `${BASE_URL}${ACCES_TOKEN}/${this.state.latitude},${this.state.longitude}?lang=nl&units=si`;

            fetch(FETCH_URL, {
                method: "GET",
            })
                .then(response => response.json())
                .then(json => {
                    const data = json;
                    this.setState({
                        weather: data,
                        loader: false,
                        secondLoader: false
                    });
                })
        })
};

Answer 1

尝试为您的按钮添加类型属性。我相信它令人耳目一新的原因是它有一个默认类型submit。尝试使用 type="button" 更多信息 here.

ComponentWillMount 在 onclick 后再次渲染

ComponentWillMount renders again after onclick

javascript

reactjs