Map 方法需要来自箭头函数的回调（Array.prototype.map() 需要来自箭头函数的 return 值）？

Question

 import React from 'react';
 const UsersList = (props) => {
     return(
         <ul>
             {props.Users.map((user)=> {
                 <li>
                     {user.age} {user.age}
                 </li>
             })}
         </ul>
     );
 }
 export default UsersList;

Answer 1

正如错误消息所说，您没有 returning 任何东西。要么使用：

{props.Users.map((user)=> {
              return (
                 <li>
                     {user.age} {user.age}
                 </li>
              )
             })}

或使用隐式 return:

{props.Users.map((user)=> (
                 <li>
                     {user.age} {user.age}
                 </li>
             ))}

Answer 2

是的，map 需要一个 return 值，它会创建一个包含所有 returned 值的新数组。这段代码不会运行因为 return 值是一个数组而不是 JSX，我要做的是调用 reduce 方法和 return 一个包含所有值的字符串： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Map 方法需要来自箭头函数的回调（Array.prototype.map() 需要来自箭头函数的 return 值）？

Map method expects a callback from arrow function (Array.prototype.map() expects a return value from arrow function)?

html-lists

reactjs