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

当索引增加时，我无法显示要更新的组件。我现在可以控制适当的组件，但是因为onClick位于需要更新的组件下面，所以它没有改变。有人能帮我修改代码吗？我想我已经很接近了，但我无法用我的一生去理解它

这个注册页面是我想要更新组件的地方。基本上，我希望在单击“下一步”按钮后显示阵列中的每个组件。目前，函数控制台按照我的要求记录所有内容，只需将其显示在

它返回错误“无法读取null的属性“count”：

从“React”导入React；
从“./questions/Q1Name”导入Q1Name；
从“./questions/q2birth”导入q2birth；
从“./questions/Q3City”导入Q3City；
从“./questions/Q4YourReady”导入Q4YourReady；
从“./questions/Q5Setting”导入Q5Setting；
从“./questions/Q6Length”导入Q6Length；
从“/questions/Q7Email”导入Q7Email；
类SignUpPage扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
i:0
}
}
_handleClick（）{
const components=[Q1Name、Q2生日、Q3City、Q4YouReady、Q5设置、Q6长度、Q7电子邮件]；
if（this.state.i(
));
返回(
{componentsToRender[this.state.i]}
这个.\u handleClick}>下一个问题！
);
}
}
导出默认签名；

我引入了一些组件类型，如年龄、生日、电子邮件和一些按钮点击等

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;

从“React”导入React；
类Q1Name扩展了React.Component{
handleSubmit（事件）{
event.preventDefault（）；
this.props.onNext（）；
}
render（）{
返回(
你的名字叫什么？
{/*下一个问题！*/}
);
}
}
导出默认名称；

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

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;

从“React”导入React；
类Q5设置扩展了React.Component{
render（）{
返回(
你的理想环境是什么？
带我去海滩！
户外任何地方！
城市的一切！
);
}
}
导出默认Q5设置；

---

如果您能帮我解决这个问题，我们将不胜感激

在构造函数中初始化

状态

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

写助手方法

handleClick

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

\u handleClick（）{
if（this.state.i

现在，在状态下使用

i

引用

componentsToRender

`componentsToRender[this.state.i]

不要忘记在单击时调用助手函数

onClick={（）=>this.\u handleClick（）}

---

这个想法是，你的应用程序只会在你的状态对象改变时重新渲染。对于您希望在fry上引用的组件，请遵循该规则。

您认为哪一行代码会更改或更新任何内容？现在，onClick函数正在正确更新索引和控制台日志记录下一个组件，但我不确定我需要做什么才能真正更新显示的组件。哦，你认为更改

I

会更新你的视图吗？您是否阅读过react中的

状态

？这就是你要找的。我更新了添加状态，但我认为我做得不对。它无法读取null的属性计数。。我是一个新的反应，所以只是尝试学习和理解。我在最初的帖子中更新了代码，以反映我应该移动组件阵列吗？当我引用该代码时，我得到了以下错误：uncaughttypeerror:cannotreadproperty'state'of null at_handleClick（eval at（bundle.js:5053），：106:22）耶！问题又回来了。但它并没有单击数组中的下一项。我将更新上面的代码，以便您可以看到我是如何设置的。OK，状态不为null的错误可能是因为您

\u handleClick

方法未绑定到上下文。请确保您像我在示例中所做的那样使用函数回调，或者在调用方法时使用

.bind（this）

，它会显示出来，但在单击按钮时仍不会更改组件类。然后，您可以只路由到这些组件，或者我可以给你的另一个想法是渲染所有组件，然后使用if或switch子句来显示所需的组件。在.map回调中渲染它们。然后可以使用switch语句，在组件的索引处于状态时呈现该组件，否则呈现null。希望我在这里讲得通。

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