Question

当索引增加时，我无法显示要更新的组件。我现在能够控制正确的组件，但因为onClick低于需要更新的组件，所以它不会改变。有人可以帮我修复我的代码吗？我想我很亲密，但无法理解我的生活。

此注册页面是我要更新组件的位置。基本上我想在单击下一个按钮后显示数组中的每个组件。目前功能控制台记录了我想要的所有内容，只需将其显示在

中即可。

它返回错误＆＃34;无法读取属性＆＃39; count＆＃39; of null＆＃34;：

import React from 'react';

class Q1Name extends React.Component {
    handleSubmit(event) {
        event.preventDefault();
        this.props.onNext();
    }

    render() {
        return (
            <div className="questions q1" style={this.props.style}>
                <h1 id="question-h1">What is your name?</h1>
                <form>
                    <div className="form-group">
                        <input type="name" className="form-control text-form custom-form" id="nameInput" aria-describedby="name" placeholder="" />
                    </div>
                    {/* <button type="submit" className="btn btn-custom btn-lg" onSubmit={this.handleSubmit}>Next Question!</button> */}
                </form>
            </div>
        );
    }
}

export default Q1Name;

我带来了一些组件类型，年龄，生日，电子邮件和几个按钮点击等。

import React from 'react';

class Q5Setting extends React.Component {
    render() {
        return (
            <div className="questions">
                <h1 id="question-h1">What is your ideal setting?</h1>
                    <button type="button" className="btn btn-custom-select btn-lg">Take me to the beach!</button>
                    <button type="button" className="btn btn-custom-select btn-lg">Anywhere outdoors!</button>
                    <button type="button" className="btn btn-custom-select btn-lg">All about the city!</button>
            </div>
        );
    }
}

export default Q5Setting;

以下是按钮选项组件的示例：

.line {
  height: 50px;
  width: 150px;
}


.line:not(.first){
  margin-top: -1px;
}

.right-side {
  margin-left: 15px;
}


.line1 {
  border-bottom: 1px blue solid;
  border-left: 1px blue solid;
  border-bottom-left-radius: 15px;
}

.line2 {
  border-top: 1px blue solid;
  border-right: 1px blue solid;
  border-top-right-radius: 15px;
}

.line3 {
  border-right: 1px red solid;
  border-bottom: 1px red solid;
  border-bottom-right-radius: 15px;
}

.line4 {
  border-top: 1px red solid;
  border-left: 1px red solid;
  border-top-left-radius: 15px;
}

任何帮助解决这个问题都将非常感谢!!

Answer 1

在构造函数初始化state

中

constructor(props) {
      super(props)
       this.state = { i: 0 }
}

编写辅助方法handleClick

_handleClick() {
      if(this.state.i < components.length) this.setState({ i : this.state.i + 1});
 }

现在使用状态componentsToRender引用i `componentsToRender [this.state.i]

不要忘记点击你的帮助功能。

onClick = {() => this._handleClick()}

这个想法是你的应用只会在状态对象发生变化时重新渲染。按照您希望在鱼苗上重新投放的组件的规则。

需要反应帮助 - 索引增加时组件不会更新

1 个答案: