Оператор return не выполняется в React (Вопрос для новичков)

На чтение 3 мин Опубликовано 16.09.2024

Я только неделю занимаюсь React, так что прошу прощения, если этот вопрос глупый.

Код самодостаточен и содержит комментарии. Мой оператор return на строке 12 не выполняется (все остальное выполняется нормально). В чем проблема?

Р.S. Я вызываю функцию ‘handleSubmit’ из другого компонента и знаю, что она вызывается (console.log на строке 9 выполняется нормально).

import { useState } from 'react';
import SearchMovies from './components/SearchMovies';
import PlayTrailer from './components/PlayTrailer';

function App() {
    const [movieName, setMovieName] = useState('');

    const handleSubmit = (movie) => {
        console.log('фильм отправлен', movie); // Это выполняется.
        setMovieName(movie);

        return <div>ЭТО НЕ ВЫПОЛНЯЕТСЯ!!!</div>; // Это не выполняется
    };

    return <div>
        <SearchMovies onSubmit={handleSubmit} />
    </div>
}

export default App;

Вывод

Дело в том, что в React функции-обработчики событий (такие как handleSubmit) не возвращают JSX напрямую. Они выполняют некоторое действие (обновляя состояние с помощью setState), и тогда функция return компонента отвечает за отображение JSX.

Вместо того чтобы пытаться вернуть JSX из handleSubmit, обновите состояние (movieName) и используйте это в основном компоненте.

Пример

import { useState } from 'react';
import SearchMovies from './components/SearchMovies';
import PlayTrailer from './components/PlayTrailer';

function App() {
    const [movieName, setMovieName] = useState('');

    const handleSubmit = (movie) => {
        console.log('фильм отправлен', movie); 
        setMovieName(movie); 
    };

    return (
        <div>
            <SearchMovies onSubmit={handleSubmit} />
            {movieName && <div>Фильм отправлен: {movieName}</div>}
        </div>
    );
}

export default App;

Ответ

Конечно! Вам не стоит извиняться за свои вопросы — каждый из нас начинает с нуля. Давайте разберёмся, почему ваш оператор return в функции handleSubmit не выполняется, и как правильно использовать обработчики событий в React.

В вашем коде функция handleSubmit вызывается при отправке формы, и она действительно выполняется, как подтверждает вывод в консоли. Однако в React обработчики событий не возвращают JSX напрямую. Вместо этого они должны выполнять какое-либо действие, например, обновление состояния с помощью функции setState, и затем сам компонент отвечает за рендеринг JSX.

Ваша текущая реализация:

const handleSubmit = (movie) => {
    console.log('movie submitted', movie);
    setMovieName(movie);

    return <div>THIS DOESN'T EXECUTE!!!</div>; // Это не сработает
};

Вместо того чтобы возвращать JSX из функции handleSubmit, лучше обновите состояние компонента, а затем используйте это состояние в возвращаемом значении самого компонента.

Вот исправленный код:

import { useState } from 'react';
import SearchMovies from './components/SearchMovies';

function App() {
    const [movieName, setMovieName] = useState('');

    const handleSubmit = (movie) => {
        console.log('movie submitted', movie); 
        setMovieName(movie); 
    };

    return (
        <div>
            <SearchMovies onSubmit={handleSubmit} />
            {movieName && <div>Movie submitted: {movieName}</div>}
        </div>
    );
}

export default App;

Теперь, когда вы вызываете handleSubmit, состояние movieName обновляется, и компонент повторно рендерится, отображая новое значение на экране. Если movieName не пустое, тогда будет отображено сообщение "Movie submitted: {movieName}".

Таким образом, основная идея заключается в том, чтобы изменять состояние при помощи вашего обработчика событий, а затем рендерить ваши компоненты на основе этого состояния в блоке return вашего компонента. Надеюсь, это поможет вам лучше понять, как работает React! Если у вас есть дополнительные вопросы, не стесняйтесь их задавать!