從數組中刪除對象-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() 。