即使使用扩展运算符 React.JS，SetState 也会覆盖之前的状态

状态已正确更改。你可以添加一个控制台日志来查看：

render() {
    console.log(this.statE);
    return (
    ...

它没有显示在您的屏幕上的原因是您为 ID 'add-button' 设置的 {display: 'none'} 。您的 var y = document.getElementById("add-button") 将只获取第一个元素，而不是整个元素列表。

仅供参考，在您的案例的反应项目中使用 document.getElementById 不太正确。应该由国家来完成。这是一个完整的例子：

export class MyClass extends Component {
  constructor(props) {
    super(props);
    this.state = {
      input: [{title: ''}],showAnotherListBtn: true,showList: false,};
  }

  onClickAnotherListBtn = () => {
    this.setState({
      showAnotherListBtn: false,showList: true,});
  }

  addList = () => {
    this.setState({
      input: [...this.state.input,{title: ''}],});
  }

  handleChange(e,indeX) {
    const {name,value} = e.target;
    const list = [...this.state.input];
    list[index][name] = value;
    this.setState({input: list});
  }

  render() {
    console.log(this.statE);
    return (
      <div>
        {this.state.showAnotherListBtn ?
          <button id="btn-list" className="btn btn-default btn-list" type="submit" onClick={this.onClickAnotherListBtn}>Add Another
            List</button> : null}
        {this.state.showList && this.state.input.map((x,i) => {
          return (
            <div key={i} id="add-button" className="add-button">
              <input id="input" type="text" onChange={(E) => {
                this.handleChange(e,i)
              }} value={x.titlE} name="title" className="form-control add-input"/>
              <button className="btn btn-default btn-list-add" onClick={this.addList} type="submit">Add</button>
            </div>
          )
        })}
      </div>
    )
  }
}

export default MyClass

从上面的代码可以看出，您只需使用布尔状态来确定是否应该显示元素。

希望这有帮助;)