0

я начал изучать react. в этом месте не отображается title.

    <ul>
                    {items.data.forEach( function(item) {
                        <li>${item.title}</li>
                    })}
                </ul>

приходит вот такие данные. это можно увидеть с помощью console.log.

!{"result":[],"data":[{"_id":"60861f22c9ad889fac816613","title":"title","type":"hack"},{"_id":"60861fe252b8af172a648ecd","title":"haip","type":"maik","__v":0}]}

вот полный код.

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <div id="root"></div>
<script type="text/babel">
    window.onload = function() {

class Index extends React.Component {
    constructor(prop) {
        super(prop);
        this.state = {
            error: null,
            isLoaded: false,
            items: []
        };
    }

    componentDidMount() {
        fetch('http://localhost:8000/status')
        .then(res => res.json())
        .then(
        (result) => {
                this.setState({
                    error: null,
                    isLoaded: true,
                    items: result
                });
            },
            (error) => {
                this.setState({
                    error: error,
                    isLoaded: false,
                    items: error
                }); 
            }
            
        );
    }

    render() {
        const { error, isLoaded, items } = this.state;
        if (error) {
            return <div>Error: {error.message}</div>
        } else if(!isLoaded) {
            return <div>Loading...</div>
        } else {
            console.log('!' + JSON.stringify(items));

            return (
                <ul>
                    {items.data.forEach( function(item) {
                        <li>${item.title}</li>
                    })}
                </ul>
            );
        }
    }
}

ReactDOM.render(<Index />, document.getElementById('root'));
}
</script>
1
  • Функция должна возвращать значение - попробуйте return <li>${item.title}</li> 27 апр 2021 в 3:30

1 ответ 1

1

Вам нужно преобразовать массив items.data в массив элементов списка, но метод forEach для этого плохо приспособлен, т.к. его основная задача - изменение элементов, а не создание нового массива (возвращаемое значение метода undefined).

В данном случае предпочтительно использование метода map, который на лету преобразует один массив в другой. И ещё, React предъявляет особое требование к содежащимся в массиве элементам - у них должен быть уникальный ключ. Проще всего для этого использовать индекс эелемета, но в реальных проектах стоит подыскать более подходящее значение.

    render() {
        const { error, isLoaded, items } = this.state;
        if (error) {
            return <div>Error: {error.message}</div>
        } else if(!isLoaded) {
            return <div>Loading...</div>
        } else {
             return (
                <ul>
                    {items.data.map( function(item, index) {
                        return (<li key={index}>{item.title}</li>)
                    })}
                </ul>
            );
        }
    }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.