javascript - 在reactjs中的渲染函数内更新数组时渲染视图

Question

当渲染器函数内部的数组被更新时，我正在尝试更新我的视图。由于 react 需要状态更改或道具更改来重新渲染，我该如何解决这个问题？

注意：数组正在正确更新，唯一的问题是我无法渲染更新的数组，因为没有发生状态更改。

我的代码

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

标签： javascriptarraysreactjs

Answer 1

没有setState()React 不知道它应该重新渲染你的视图。

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

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

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

  render() {
    const textPollMaxLength = 35;


    return (
      <form onSubmit={this.props.handleSubmit}>

        {[...Array(this.state.addOption).keys()].map((item, i) => (
            <div key={i}>
            <div className="txt_vote_bar_div">
              <div onClick={this.removetextpoll}>remove</div>
              <Field
                name={`inputName${i}`}
                component="input"
                type="text"
                placeholder={`Option ${i}`}
                maxLength={textPollMaxLength}
              />
            </div>
          </div>
        ))}

        <div onClick={this.addOption}>
          <span>Add Option</span>
        </div>
        {JSON.stringify(this.state)}
      </form>
    );
  }
}

ReactDOM.render(<TextVotePost />, document.querySelector("#app"))