Reactjs 从嵌套组件返回映射迭代器的正确方法是什么？

在尝试从渲染方法返回（更复杂的）值时，我经常会产生各种错误。大部分问题我都能解决。但这一次，组件根本不渲染，但。。。没有控制台错误

当涉及到返回单个元素时，我理解标准的return（…）语法，但在某些情况下，我不完全理解为什么它会破坏我的代码

我正在试验的代码示例：

class RenderMe1 extends React.Component {
    constructor(props) {
        super(props);
        this.state = { list: ['A','B','C'] }
    }
    render() {
        return(
        <div>
            <div>
                /* === Works === */
                { this.state.list.map((object, index) => this.state.list[index] ) }
            </div>
        </div>);
    }
}

class RenderMe2 extends React.Component {
    constructor(props) {
        super(props);
        this.state = { list: ['0','0','0'] }
    }
    render() {
        return(
        <div>
            <div>
                /* === Doesn't Work === */
                { this.state.list.map((object, index) => { this.state.list[index] } ) }
            </div>
        </div>);
    }
}

ReactDOM.render(<RenderMe1 />, document.getElementById("root"));  // works
ReactDOM.render(<RenderMe2 />, document.getElementById("root2")); // doesn't work

类RenderMe1扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={list:['A'，'B'，'C']}
}
render（）{
返回(
/*==作品===*/
{this.state.list.map（（对象，索引）=>this.state.list[index]）
);
}
}
类RenderM2扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={list:['0'，'0'，'0']}
}
render（）{
返回(
/*==不起作用===*/
{this.state.list.map（（对象，索引）=>{this.state.list[index]}}
);
}
}
ReactDOM.render（，document.getElementById（“根”）；//作品
ReactDOM.render（，document.getElementById（“root2”）；//不起作用

---

出于实践目的，我正在使用浏览器中的babel插件，因此使用JSX语法。

您的第一个示例是隐式返回。也就是说，您不需要指定return关键字，因为您没有使用大括号，因此它返回表达式

你有第二个，所以它不会返回任何东西。这是修改后的代码

class RenderMe2 extends React.Component {
    constructor(props) {
        super(props);
        this.state = { list: ['0','0','0'] }
    }
    render() {
        return(
        <div>
            <div>

                { this.state.list.map((object, index) => { return this.state.list[index] } ) }
            </div>
        </div>);
    }
}

类renderm2扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={list:['0'，'0'，'0']}
}
render（）{
返回(
{this.state.list.map（（对象，索引）=>{返回this.state.list[index]}）}
);
}
}

我想你这样做是因为这是一个例子，但你可以这样做

---

this.state.list.map（listItem=>listItem）
括号内的代码仍然有效，原因很简单，尽管JavaScript计算语句，但它不会返回语句

但在这种特殊情况下，问题在于arrow函数本身。下面有一个特定的规则：跳过{}括号时，语句实际上被视为返回值，而不必使用return关键字。这会稍微清理代码。但是，一旦添加{}括号，里面的任何内容都必须使用return关键字显式返回。以下内容将解决您的问题：

{ this.state.list.map((object, index) => { return(this.state.list[index]) } ) }

请记住，React实际上仍然只是JavaScript（通常是ES6+），至于在React中专门返回迭代器，请参阅本教程，该教程通过几个正确的返回用例指出了问题。您的操作只是执行语句

希望这能有所帮助。
第二种方法不起作用的原因是带有箭头函数的语法微妙之处

当您用{and}包装包含单个语句的arrow函数时，该arrow函数有效地等同于返回
未定义的

例如：

(object, index) => { this.state.list[index] }

等同于：

function(object, index) { 

   this.state.list[index];

   // Notice that nothing is returned
}

相反，通过排除
{
和
}
，正如您在工作版本中所做的那样：

{ this.state.list.map((object, index) => this.state.list[index] ) }

这实际上等于：

{ this.state.list.map(function(object, index) {

   // The function is returning something
   return this.state.list[index]
}

非
{..}
箭头函数的
返回
行为“免费提供”

是第一个版本正常工作而后一个版本失败的原因。要了解更多信息，我将提供一个非常类似的答案。也许提到这是关于箭头函数和提供源代码链接会更好。谢谢，伙计们，我真的很感谢你们的回答，非常有用。