向 React.js 中的数组添加新值后出现警报问题

Problem with alert after adding new value to the array in React.js

在我参加的 React.js 课程中,我的任务是制作一个简单的算命应用程序。理论上,一切都按计划进行,但我完成任务的方式与导师不同。我创建了一个对象数组,而不是简单的算命 table,每个对象都有它的 id 和 'omen'。添加新的 'omen' 后,应显示一个警报,显示状态中 'omens' 的当前内容时出现问题。只显示以前的值,没有添加的值。我将不胜感激提示。在原来的设计中,没有出现这个问题,虽然很像。

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"));

state 对象是不可变的。所以你需要创建你的新数组并在之后应用它:

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

另外 setStateasync 所以你需要等到它完成:

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

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