React类组件中如何将输入框内容添加到map生成的li列表展示

实现方案 #

你只需要做两处核心调整即可完成需求：

1. 修改提交事件逻辑

React的state遵循不可变原则，不能直接修改原数组，需要生成新的users数组后调用setState触发视图重渲染，同时提交后清空输入框优化体验：

// 提交事件
handleSubmit(event) {
  event.preventDefault();
  const contactName = this.state.AddContact.trim();
  // 过滤空内容提交
  if (!contactName) return;
  this.setState({
    // 扩展运算符生成新数组，追加新联系人
    users: [...this.state.users, { name: contactName, href: "" }],
    // 清空输入框
    AddContact: ""
  });
}

2. 修正渲染逻辑的冗余代码与错误

你当前render里的这行代码是无效冗余的，且存在拼写错误（lenght应为length），直接删除即可：

{this.state.users && this.state.users.lenght ? this.state.users : []}

同时建议给map生成的li添加key属性，避免React抛出警告：

<ul className="list-unstyled components mb-5">
  {this.state.users.map((user, index) => (
    <li key={index}>
      <a href={user.href}>{user.name}</a>
    </li>
  ))}
</ul>

修改完成后点击添加按钮即可自动将输入的联系人同步到列表中展示。

内容的提问来源于stack exchange，提问作者Aida