javascript - 使用 ReactJS 显示新的列表项 onclick

Question

我在单击按钮时更新数组并将其显示为列表项时遇到问题。从下面的代码中，我收到错误消息:

list.map is not a function

import React from "react";


export default class InputPushToList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      ActiveText: "",
      li: ["First Item"]
    };

    this.handleOnClick = this.handleOnClick.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.setState({
      ActiveText: e.target.value
    });
  }

  handleOnClick(e) {
    e.preventDefault();

    const newListItem = [this.state.ActiveText];

    this.setState({
      li: this.state.li.push(newListItem)
    });
  }

  render() {
    const list = this.state.li;
    return (
      <React.Fragment>
        <h2>{this.props.inputTitle}</h2>
        <input type="text" onChange={this.handleChange} />
        <h2>{this.state.ActiveText}</h2>
        <br />
        <button onClick={this.handleOnClick}>Add to list</button>

        <ul>
          {list.map(e => (
            <li>{e}</li>
          ))}
        </ul>
      </React.Fragment>
    );
  }
}

在我看来，list.map 是一个函数，但显然不是，那为什么呢？单击按钮时，如何再显示一个列表项(即输入的事件状态，this.state.ActiveText)？感谢您的帮助。

Answer 1

1。不要改变 this.state

在handleOnClick()中，不要编写this.state.li.push(newListItem)。

相反，创建 this.state.li 的克隆，将 newListItem 添加到该克隆中，并将 li 的状态设置为新克隆:

handleOnClick(e) {
  e.preventDefault();
  this.setState({
    li: [
      ...this.state.li, // spread out the existing li
      this.state.ActiveText // append this newListItem at the end of this array
    ]
  });
}

2。考虑解构

在 render() 中，您可以解构 this.state.li:

render() {
  const { li } = this.state
  return (
    <React.Fragment>
      ...other stuffs
      <ul>
        {li.map(e => (
          <li>{e}</li>
        ))}
      </ul>
    </React.Fragment>
  );
}