为什么我的元素没有被附加到我的数组状态？

Question

我正在尝试使用 React 构建一个简单的待办事项应用程序，其中包含一个供用户使用的文本输入区域和一个“添加”按钮，单击该按钮后，会将用户的文本输入添加到下方的有序列表中。 以下是我认为与此问题有关的整个代码的一部分：

import React from "react";
import TextBar from "./TextBar";
import AddButton from "./AddButton";
import ListEntry from "./ListEntry";

class UserToDoInput extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      userTextInput: "",
      listArray: ["test1", "test2", "test3"]
    };
    this.updateText = this.updateText.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({
      listArray: [...this.listArray, this.userTextInput]
    });
  }

  updateText(evt) {
    this.setState({
      userTextInput: evt.target.value
    });
  }

  render() {
    return (
      <div>
        <form className="form-inline" id="usertodoinput">
          <TextBar function={this.updateText} compValue={this.state.userTextInput} />
          <AddButton function={this.handleClick} />
        </form>
        <ListEntry compValue={this.state.listArray} />
      </div>
    );
  }
}

export default UserToDoInput;

正如您在上面的代码中看到的那样，当用户单击“添加”按钮时会触发handleClick函数，从而导致用户在TextBar组件中输入的文本被附加到listArray状态。 然后，这个listArray数组将在ListEntry组件内映射到一个有序列表中。

这它的工作原理是将listArray映射到有序列表中。 我知道这一点，因为我在listArray数组中有三个“tester”元素，即test1, test2, test3 。 并且所有这些“测试器”元素都明显地转换为有序列表。

但是，当我在文本输入中手动输入一个值并单击“添加”按钮后查看我的listArray数组时，我可以在我的 Chrome 扩展程序中看到我的listArray没有使用新的附加值更新。

当我查看我的handleClick函数时，似乎没有任何语法错误，那么此错误的原因可能是什么？

谢谢您的帮助

更新

正如其中一位回答者 Prateek Thapa 所建议的，下面是我分别用于 TextBar、AddButton、ListEntry 组件的代码。

文本栏组件：

import React from "react";

class TextBar extends React.Component {
  render() {
    return (
      <input type="text" className="form-control" id="textbar" placeholder="What I should get done today..." onChange={this.props.function} value={this.props.compValue} />
    );
  }
}

export default TextBar;

添加按钮组件：

import React from "react";

class AddButton extends React.Component {
  render() {
    return (
      <button className="btn btn-primary mb-2" id="addbutton" onClick={this.props.function}>ADD</button>
    );
  }
}

export default AddButton;

ListEntry 组件：

import React from "react";

class ListEntry extends React.Component {

  render() {
    return (
      <div>
        <ol>
          {this.props.compValue.map((elem, i) => <li key = {i}>{elem}</li>)}
        </ol>
      </div>
    );
  }
}

export default ListEntry;

Answer 1

修正你从this.listArray到this.state.listArray错字

 handleClick() {
    this.setState({
      listArray: [...this.state.listArray, this.state.userTextInput]
    });
  }

您也可以使用更新程序版本。 在这种情况下， this.setState 接受一个函数，该函数获取 prevState 作为参数。

handleClick() {
    this.setState((prevState) => ({
      listArray: [...prevState.listArray, this.state.userTextInput]
    }));
  }

Answer 2

你错过了在 setState 中使用 state

handleClick() {
    this.setState({
      listArray: [...this.state.listArray, this.state.userTextInput]
    });
  }

Answer 3

这里的问题是输入字段和按钮在表单标签中，浏览器的默认行为是将表单中的按钮解释为<input type="submit"/>从而刷新页面并且所有状态都丢失了组件被重新渲染。

  handleClick(evt) {
    evt.preventDefault() // this line prevents the refresh from happening. 
    this.setState({
      listArray: [...this.listArray, this.userTextInput]
    });
  }

另一种解决方案是不使用表单元素。 对于这样的事情，它并没有真正达到真正的目的。