向 React.js 中的數組添加新值后出現警報問題

Question

在我正在學習的 React.js 課程中，我的任務是制作一個簡單的算命應用程序。 從理論上講，一切都按計划進行，但我完成的任務與導師不同。 我創建了一個對象數組，而不是一個簡單的算命表，每個對象都有它的 id 和“預兆”。 在添加新的“預兆”后出現問題，應顯示一條警報，給出 state 中“預兆”的當前內容。 僅顯示以前的值，沒有附加值。 我將不勝感激。 在最初的設計中，並沒有出現這個問題，盡管它非常相似。

class Draw extends React.Component {
  state = {
    index: "",
    value: "",
    omens: [
      { id: 1, omen: "Hard work pays off" },
      { id: 2, omen: "You will be rich" },
      { id: 3, omen: "Be kind to others" },
    ],
  };

  handleDrawOmen = () => {
    const index = Math.floor(Math.random() * this.state.omens.length + 1);
    this.setState({
      index: index,
    });
  };

  showOmen = () => {
    let omens = this.state.omens;
    omens = omens.filter((omen) => omen.id === this.state.index);
    return omens.map((omen) => (
      <h1 id={omen.id} key={omen.id}>
        {omen.omen}
      </h1>
    ));
  };

  handleInputChange = (e) => {
    this.setState({
      value: e.target.value,
    });
  };

  handleAddOmen = () => {
    if (this.state.value === "") {
      return alert("Enter some omen!");
    }
    const omens = this.state.omens.concat({
      id: this.state.omens.length + 1,
      omen: this.state.value,
    });

    this.setState({
      omens,
      value: "",
    });
    console.log(this.state.omens);
    alert(
      `Omen added. Actual omens: ${this.state.omens.map(
        (omen) => omen.omen
      )}`
    );
  };

  render() {
    return (
      <div>
        <button onClick={this.handleDrawOmen}>Show omen</button>
        <br />
        <input
          placeholder="Write your own omen..."
          value={this.state.value}
          onChange={this.handleInputChange}
        />
        <button onClick={this.handleAddOmen}>Add omen</button>
        {this.showOmen()}
      </div>
    );
  }
}

ReactDOM.render(<Draw />, document.getElementById("root"));

Answer 1

state object 是不可變的。 因此，您需要創建新數組並在之后應用它：

const omens = [
  ...this.state.omens,
  {
    id: this.state.omens.length + 1,
    omen: this.state.value,
  }
]

setState也是async的，因此您需要等到它完成：

this.setState({
  omens,
  value: "",
}, () => {
  alert(
  `Omen added. Actual omens: ${this.state.omens.map(
    (omen) => omen.omen
  )}`
)

https://reactjs.org/docs/react-component.html#setstate