為什么我的元素沒有被附加到我的數組狀態？

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]
    });
  }

另一種解決方案是不使用表單元素。 對於這樣的事情，它並沒有真正達到真正的目的。