Question

所以如果我console.log(this.props)

，这就是我的道具

list:Array(1):
{user: "Jack Nicholson", userid: "5b684ed8d3eb1972b6e04d32", socket: "1c0-Jb-kxe6kzPbPAAAD"}

但是，当我遍历list并使用组件<UserItem user={user.user} />;时，我的UserItem始终返回未定义状态。

render() {
    const UserItem = user => (
      <li>
        <div className="btn-group dropup">
          <button
            type="button"
            className="btn btn-secondary dropdown-toggle"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
          >
            {user}
            {console.log(user)}
          </button>
          <div className="dropdown-menu" />
        </div>
      </li>
    );
    return (
      <ul>
        {this.props.list.map((user, i) => {
          console.log(this.props);
          <UserItem user={user.user} />;
        })}
      </ul>
    );
  }

Answer 1

two forms中包含JS中的箭头功能：“简洁主体”和“块主体”。简洁的形式（如您的const UserItem = user => (函数中一样），将隐式返回提供的表达式。

但是，与this.props.list.map((user, i) => {函数一样，必须以块形式使用显式的return语句。

尝试在代码中添加一个：

{this.props.list.map((user, i) => {
  console.log(this.props);
  return <UserItem user={user.user} />;
})}

Answer 2

如果您将列表作为API响应获取，则也可以处理初始呈现。但是，请在UserItem函数中返回map组件。请尝试此代码

    return (
      <ul>
        {this.props.list && this.props.list.map((user, i) => {
          console.log(this.props);
          return <UserItem user={user.user} />;
        })}
      </ul>
    );

Answer 3

您可以简单地使用圆括号代替大括号；

return (
  <ul>
    {
       this.props.list.map((user, i) => (
          <UserItem user={user.user} />
       ))
    }
  </ul>
);

Answer 4

您需要在return之前添加<UserItem user={user.user} />语句，还请确保在渲染this.props.list之前检查它是否存在。

像这样：

{this.props.list? this.props.list.map((user, i) => {
          console.log(this.props);
          return <UserItem user={user.user} />;
}):<span/>}

<ul>列表项未在React中添加

4 个答案: