使用从父组件传递的数组生成下拉菜单

Question

我试图建立一个dropdown-menu ，并将数据从我的数组添加到dropdown-item 。 我当前的代码没有向const Users返回任何内容。 如何使用数组将数据添加到dropdown-item ？

UserDisplay组件

   const UserDisplay = ({ users }) => {
      const Users = users.map(user => {
        let i = 0;
        <a className="dropdown-item" href="#">
          {user[i]}
        </a>;
        i++;
      });
      return (
        <div className="dropdown-menu" id="users">
          <a className="dropdown-item" href="#">
            Online Users
          </a>
          <div className="dropdown-divider" />
             {Users}
        </div>
      );
    };

父组件ChatLayout

return (
      <div className="chat navbar fixed-bottom">
        <div className="btn-group dropup">
          <button
            type="button"
            className="btn btn-secondary dropdown-toggle"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
          >
            Chat
          </button>
          <UserDisplay users={[this.state.users]} />
        </div>
        <ul id="messages">
          <div />
        </ul>
        <form onSubmit={this.onSubmit}>
          <textarea
            name="message"
            placeholder="Enter your message here"
            autoComplete="off"
            type="submit"
            onKeyDown={this.onEnterPress}
            value={this.state.message}
            onChange={this.onChange}
          />
          <input type="submit" className="btn btn-info btn-block mt-4" />
        </form>
      </div>
    );

Answer 1

您不需要定义和迭代i .. .map已经跟踪了数组索引。 假设users有数据，它应该像这样工作...

  UserDisplay(users) {
      const Users = users.map((user,i) => {
        return (
            <a className="dropdown-item" key={i} href="#">
              {user}
            </a>)
      });
      return (
        <div className="dropdown-menu" id="users">
          <a className="dropdown-item" href="#">
            Online Users
          </a>
          <div className="dropdown-divider" />
          {Users}
        </div>
      );
  };

工作规范： https ://www.codeply.com/go/DnqpGhozra

Answer 2

您正在破坏道具对象，并使其脱离用户，因此效果很好。 基本上map返回数组列表，所以您什么也没有返回。

您需要迭代用户的第一个元素，例如

const Users = users[0].map((user,i) => {
        console.log(user);
        return (
            <a className="dropdown-item" key={i} href="#">
              {user}
            </a>)
      });

或者直接通过用户

 <UserDisplay users={this.state.users} />