Ожидается присваивание или вызов функции, и вместо этого он видит ошибку выражения в реакции, если return отсутствует в выражении карты, почему?

Question

import React, { Component } from 'react'

export default class DisplayTodo extends Component {
    state = {
        todo:["eat", "sleep", "repet"]
    }
    render() {
        return (
            <div>
            {
                this.state.todo.map((value)=>{
                    <p>{value}</p>
                })
            }
            </div>
        )
    }
}

1) Я знаю, если я продолжаю возвращаться на карте , это работает, но я хочу знать, почему это не удалось

2) Более того, я ссылаюсь на ссылку для React

https://reactjs.org/docs/introducing-jsx.html#embedding -expressions-in-jsx

Теперь ошибка выглядит совсем не так, как в объяснении: «Ожидается назначение или вызов функции, и вместо этого она видит» Выражение

3) в вышеприведенном объяснении ссылки реакции сказано, что Вы можете поместить любое допустимое выражение JavaScript в фигурные скобки

4) Более того, в javascript мы можем написать как вот почему это невозможно в React

var a = [11,33,99]
a.map((val)=>{
console.log(val*2)
})

Answer 1

Итак, в вашем коде

export default class DisplayTodo extends Component {
    state = {
        todo:["eat", "sleep", "repet"]
    }
    render() {
        return (
            <div>
            { <-- outer expression start
                this.state.todo.map((value)=>{
                    <p>{value}</p>  <-- inner expression
                })
            } <-- outer expression end
            </div>
        )
    }
}

У вас есть одно внешнее выражение, которое оборачивает ваш код JS, это совершенно правильно. Ваше внутреннее выражение также хорошо, потому что вы используете фигурные скобки для JS кода внутри элемента JSX. Но для того, чтобы React отображал значения из массива todo, вы должны вернуть каждый элемент из обратного вызова карты, например:

export default class DisplayTodo extends Component {
    state = {
        todo:["eat", "sleep", "repet"]
    }
    render() {
        return (
            <div>
            {
                this.state.todo.map((value)=>{
                    return <p key={value}>{value}</p>
                })
            }
            </div>
        )
    }
}

Или вы можете сделать:

{
  this.state.todo.map(value => <p key={value}>{value}</p>)
}

Примечание: Я также добавил ключи React для каждой задачи в массиве, поэтому у вас есть какая-то уникальность ( хорошее объяснение ключей React )

Hope это помогает:)

Answer 2

Для фигурных скобок "{}" требуется оператор возврата. Если вы не хотите добавлять оператор возврата, просто используйте "()" или ничего. пр)

this.state.todo.map((value)=>
  <p>{value}</p>
)