需要 React 帮助 - 索引增加时组件不更新

Question

当索引增加时，我无法让显示的组件更新。我现在可以控制正确的组件，但是因为 onClick 在需要更新的组件下方，所以它没有改变。有人可以帮我修复我的代码吗？我想我已经很接近了，但我一生都无法弄清楚。

这个注册页面是我想要更新组件的地方。本质上，我想在单击下一个按钮后显示数组中的每个组件。目前，功能控制台会按照我的意愿记录所有内容，只需让它出现在

返回错误“无法读取属性‘count’ of null”：

import React from 'react';
import Q1Name from './questions/Q1Name';
import Q2Birthday from './questions/Q2Birthday';
import Q3City from './questions/Q3City';
import Q4YouReady from './questions/Q4YouReady';
import Q5Setting from './questions/Q5Setting';
import Q6Length from './questions/Q6Length';
import Q7Email from './questions/Q7Email';

        class SignUpPage extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            i: 0
        }
    }

    _handleClick() {
        const components = [Q1Name, Q2Birthday, Q3City, Q4YouReady, Q5Setting, Q6Length, Q7Email];

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

    //  handleIncrement() {
    //         this.setState({ count: this.state.count + 1});
    //     }}

    render() {
        const components = [Q1Name, Q2Birthday, Q3City, Q4YouReady, Q5Setting, Q6Length, Q7Email];
        const componentsToRender = components.map((Component, i) => (
            <Component key={i} />
        ));


        return (
            <div className = "container-fluid signup-page">
                <div className = "question-box">
                    {componentsToRender[this.state.i]}
                    <button type="submit" className="btn btn-custom btn-lg" onClick={() => this._handleClick}>Next Question!</button>
                </div>
            </div>
        );
    }
}

export default SignUpPage;

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

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;

任何帮助解决这个问题将不胜感激！

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

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

不要忘记在点击时调用你的辅助函数。

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

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