从数组中删除对象-JavaScript

Question

如果满足某些条件，则在单击按钮时将div组件推入阵列。 我在我的视图中显示我的列表。 它工作正常，但在尝试从数组中删除div组件时遇到问题。为什么当我尝试从数组中删除对象时列表没有更新，但是当我向数组中添加对象时却可以正常工作阵列？ 我想更新我的数组，即使我从数组中删除对象时也是如此，它应该删除我实时删除的div组件。

我已经使用控制台日志进行了检查，并且代码正常运行，因为当我单击removetextpoll时，它删除了div组件，但问题是我的视图仍未保留。

我的代码如下。

class TextVotePost extends Component {
  constructor() {
    super();
    this.state = {
      addOption: 3,
      maxImage: 4,
      optionBtn: true,
    };
    this.addOption = this.addOption.bind(this);
  }

  addOption() {
    this.setState(prevState => ({
      addOption: ++prevState.addOption,
    }));
  }

  render() {
    let list = [];
    const textPollMaxLength = 35;

    function removetextpoll() {
      list.splice(0, 1);
    }

    for (let i = 3; i <= this.state.maxImage; i++) {
      {
        this.state.addOption > i &&
          list.push(
            <div key={i}>
              <div className="txt_vote_bar_div">
                <div onClick={removetextpoll} />

                <Field
                  name={`inputName${i}`}
                  component="input"
                  type="text"
                  placeholder={`Option ${i}`}
                  maxLength={textPollMaxLength}
                />
              </div>
            </div>,
          );
      }
    }

    return (
      <form onSubmit={this.props.handleSubmit}>
        {list}
        <div onClick={this.addOption}>
          <span>Add Option</span>
        </div>
        }
      </form>
    );
  }
}

Answer 1

React组件仅在其状态或道具改变时才重新渲染。 该列表不是状态或道具的一部分，而只是您在render函数中声明的一些列表。

添加选项时，您要在addOption()更改状态，但是要删除选项，您只是直接拼接该数组。 您需要通过状态或道具对列表进行编辑，以使更改触发重新渲染并更新视图。

正如有人评论（看起来他们现在已将其删除）一样，请注意splice()和slice()之间的区别。 直接改变状态/道具不会触发重新渲染，也将导致错误和奇怪的行为。 要更改道具，您需要传递一个新的道具，或更改状态，您需要使用setState() 。