Question

我正在尝试通过map函数迭代时输出一堆li。问题是该代码直接放在render return语句中时可以工作，但是如果我在一个辅助函数中组织它并在return语句中调用该函数，则该代码将停止工作。

作品：

const UserList = (props) => {
  if(props.items.length === 0){
    return (
      <div className="center">
        <h2>No users found.</h2>
      </div>
    );
  }
}

return <ul className="users-list">
  {
    props.items.map(user => {
      console.log(user.name);
      return <li>{user.id}</li>   
    })
  }
</ul>

不起作用：

const UserList = (props) => {
  if(props.items.length === 0){
    return (
      <div className="center">
        <h2>No users found.</h2>
      </div>
    );
  }
}

const renderList = () => {
  props.items.map(user => {
    console.log(user.name);
    return <li>{user.id}</li>   
  })
};

return <ul className="users-list">
  {renderList()}
</ul>

Answer 1

您需要在方法上添加return语句。

const { items } = props; 

const renderList = () => {
  return items.map(user => {
      return <li>{user.id}</li>   
    }
  )
};

或代码较少的简短版本。在箭头函数中，如果仅返回结果而不进行进一步处理，则无需写下花括号和return语句。

const { items } = props; 

const renderList = () => items.map(user => <li>{user.id}</li>);

Answer 2

执行以下操作：

const renderList = () => {
    return props.items.map(user => {
        console.log(user.name);
        return <li>{user.id}</li>   
      }
    )
};

通过函数调用时Map（）不返回JSX

2 个答案: