Laravel 7 + Ошибка рендеринга React: рендер ничего не вернул - PullRequest
Новая
       173

Laravel 7 + Ошибка рендеринга React: рендер ничего не вернул

1 голос
/ 07 августа 2020

У меня есть простой компонент реакции в приложении Laravel 7. Если я попытаюсь написать метод рендеринга, он выдаст мне ошибку: Ничего не было возвращено из рендеринга. Если я использую только return () без рендеринга, он работает. Что я делаю не так? 

import React from 'react';
import ReactDOM from 'react-dom';

function ItemsList() {

    /*constructor(props)
    {
        //super(props);
        //this.state.list = [1,2,3,4,5,6,7,8,9];
    }*/

    let state = {
        list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        test: 'this is state.test value'
    }

    function render() {

        const list = state.list.map(item => {
            <li>{item}</li>
        })

        return (
            <div onClick={handleClick}>This is Items List component and {state.test}</div>
        )
    }


    function handleClick(e) {
        alert("beeeeeeeeeeeeeeeeeee");
    }
}

export default ItemsList;

if (document.getElementById('itemsList')) {
    ReactDOM.render(<ItemsList />, document.getElementById('itemsList'));
}

1 Ответ

4 голосов
/ 07 августа 2020
Функция

render используется в компонентах на основе классов, поскольку вы используете функциональный компонент, вам не нужен метод render, просто return для рендеринга вашего JSX. 

function ItemsList() {

    /*constructor(props)
    {
        //super(props);
        //this.state.list = [1,2,3,4,5,6,7,8,9];
    }*/

    let state = {
        list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        test: 'this is state.test value'
    }

        const list = state.list.map(item => {
            // Here this is JSX element so you must return it.
            return (<li>{item}</li>)
        })

return (
            <div onClick={handleClick}>This is Items List component and {state.test}</div>
<ul>{list}</ul>
        )



    function handleClick(e) {
        alert("beeeeeeeeeeeeeeeeeee");
    }
}
...