Кнопка поиска ReactJs перезагружает страницу, прежде чем fetch сможет получить ссылки на изображения и отобразить их

Question

В моем приложении реакции была функция CompnentDidMount (), которая использовала бы выборку для получения ссылок на изображения.Я хотел обновить приложение, чтобы иметь кнопку поиска.Поэтому вместо того, чтобы показывать изображения прямо при загрузке страницы, я хотел, чтобы изображения загружались после того, как человек нажимает кнопку поиска.Однако, когда я нажимаю кнопку поиска, изображения начинают частично, а затем исчезают.Я считаю, что страница перезагружается и, таким образом, изображения исчезают

полный код

import React, { Component } from 'react';
import './App.css';
import { FormGroup, FormControl, InputGroup, Form, } from 'react-bootstrap'



class App extends Component{
    constructor(props){
        super(props)
        this.state = {
            query: '',
            fimg: []
        }
        this.OnSearch = this.OnSearch.bind(this);
    }

    OnSearch(){

    this.setState({
        fimg: ['https://static.zerochan.net/Emilia.%28Re%3AZero%29.full.2042398.jpg',
        "https://static.zerochan.net/Rem.%28Re%3AZero%29.full.2034957.jpg"]
    })

    }

    render(){
        // this.state.fimg.map( img => console.log(img))
        let images = this.state.fimg.map(( img, k) => {
            return <img src={img}  key={k} title="images" alt="Re:Zero" width="50%"/>
        })

        return(
        <div className="App">
            <div className="App-title"> Anime Images</div>
            <Form>
            <FormGroup>
                <Form.Label>Search Anime</Form.Label>
                <InputGroup className="formSize">
                    <FormControl
                        size="lg"
                        type="submit"
                        placeholder="Search for an Artist"
                        value = {this.state.query}
                        onChange= {event => {this.setState({query: event.target.value})}}
                        onKeyPress={event => {
                            if (event.key === 'Enter'){
                                this.OnSearch()
                            }
                        }
                        }
                        />
                </InputGroup>



            </FormGroup>
            <button onClick={() => this.OnSearch()}>search</button>
            </Form>
            <div className="Profile">
                <div>Artist Picture</div>
                <div className="loopedImages">
                    <div>
                        {images}
                    </div>

                </div>
            </div>

        </div>
        )
    }
}

export default App;

Есть ли способ предотвратить перезагрузку страницы?или это еще одна проблема, кроме перезагрузки

Answer 1

Добавьте type="button" к вашему <Button /> компоненту.

Answer 2

Любой <Button> на вкладке <Form> отправляет форму и перезагружает страницу.Это стандартное поведение ФОРМЫ и КНОПКИ.Чтобы этого не случилось, вы должны превзойти его.

Метод event.preventDefault() является функцией по умолчанию, которая останавливает отправку формы и загрузку страницы.

В вашем коде сделайте что-нибудь

OnSearch(e){
   e.preventDefault();
   this.setState({
       fimg: ['https://static.zerochan.net/Emilia.%28Re%3AZero%29.full.2042398.jpg',
       "https://static.zerochan.net/Rem.%28Re%3AZero%29.full.2034957.jpg"]
   })
}

Выше e является аргументом по умолчанию для любого события браузера.Таким образом, это остановит загрузку страницы.Надеюсь, это поможет!

Answer 3

Возможно, вам придется отменить обработку событий по умолчанию.

Это может включать в себя:

• определяя onClick для кнопки, которая делает event.preventDefault(), или добавляя ее к вашему onSearch
• определяет onSubmit для <Form>, который делает return false

---

В целом кажется, что вы озадачены тем, что видите. Это хорошая возможность научиться отлавливать ошибки.

Один из подходов состоит в том, чтобы прикрепить обработчики событий к кнопке и форме и вставить инструкцию журнала в качестве первой строки внутри каждой из них. Затем вы откроете DevTools вашего браузера, включите «Preseve log» (чтобы обновления страницы не очищали журнал) и нажмете кнопку, чтобы увидеть, что происходит.

Более сложный подход - использовать отладчик, который интегрирован в Chrome & Firefox DevTools. Вы можете вставить точки останова в свой код реакции и затем нажать кнопку; отладчик остановит выполнение на вашей точке останова, что позволит вам в свободное время проверять среду выполнения и проходить по коду пути по одной инструкции за раз.