javascript - 每次更改都会调用 React 函数

Question

我正在构建同构 React 应用程序。我目前正在处理的工作流程是:

1. 用户导航到 /questions 路由，这使 API 调用服务器端并在页面上加载数据。这将调用 renderData() 函数，并加载所有问题供用户查看。
2. 用户点击添加按钮添加新问题，然后会弹出一个模式供用户输入表单字段并创建新问题。

随着模态的每一次变化，renderData() 函数都会被调用(它不应该这样)。当用户单击 Create Question 按钮时，renderData() 函数也被调用并抛出错误，因为状态发生了变化。

我无法确定为什么每次在模态中发生任何事情时都会调用 renderData() 函数。关于为什么会发生这种情况以及如何避免这种情况有什么想法吗？

主要成分:

import React, { Component, PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './QuestionsPage.scss';
import QuestionStore from '../../stores/QuestionStore';
import QuestionActions from '../../actions/QuestionActions';
import Loader from 'react-loader';
import QuestionItem from '../../components/QuestionsPage/QuestionItem';
import FloatButton from '../../components/UI/FloatButton';
import AddQuestionModal from '../../components/QuestionsPage/AddQuestionModal';

const title = 'Questions';


class QuestionsPage extends Component {

    constructor(props) {
        super(props);
        this.state = QuestionStore.getState();
        this.onChange = this.onChange.bind(this);
        this.openModal = this.openModal.bind(this);
        this.closeMOdal = this.closeModal.bind(this);
    }

  static contextTypes = {
    onSetTitle: PropTypes.func.isRequired,
  };

  componentWillMount() {
    this.context.onSetTitle(title);
    QuestionStore.listen(this.onChange);
}

componentWillUnmount() {
    QuestionStore.unlisten(this.onChange);
}

onChange(state) {
    this.setState(state);
}

openModal = () => {
    this.setState({ modalIsOpen: true});
}

closeModal = () => {
    this.setState({ modalIsOpen: false});
}

createQuestion = () => {
    const date = new Date();
    const q = this.state.question;
    q.createdAt = date;
    this.setState({ question : q });
    QuestionStore.createQuestion(this.state.question);
}

textChange = (val) => {
    const q = this.state.question;
    q.text = val;
    this.setState({ question : q });
}

answerChange = (val) => {
    const q = this.state.question;
    q.answer = val;
    this.setState({ question : q });
}

tagChange = (val) => {
    const q = this.state.question;
    q.tag = val;
    this.setState({ question : q });
}

companyChange = (val) => {
    const q = this.state.question;
    q.company = val;
    this.setState({ question : q });
}

renderData() {
    return this.state.data.map((data) => {
        return (
            <QuestionItem key={data.id} data={data} />
        )
    })
}

  render() {
    return (
      <div className={s.root}>
        <div className={s.container}>
          <h1>{title}</h1>
            <div>
                <Loader loaded={this.state.loaded} />
                <FloatButton openModal={this.openModal}/>
                <AddQuestionModal
                    open = {this.state.modalIsOpen}
                    close = {this.closeModal}
                    createQuestion = {this.createQuestion}
                    changeText = {this.textChange}
                    changeAnswer = {this.answerChange}
                    changeTag = {this.tagChange}
                    changeCompany = {this.companyChange}
                />
                { this.renderData() }
            </div>
        </div>
      </div>
    );
}

}

export default withStyles(QuestionsPage, s);

模态组件:

import React, { Component, PropTypes } from 'react';
import QuestionStore from '../../stores/QuestionStore';
import QuestionActions from '../../actions/QuestionActions';
import Modal from 'react-modal';
import TextInput from '../UI/TextInput';
import Button from '../UI/Button';

class AddQuestionModal extends Component {
    createQuestion = () => {
        this.props.createQuestion();
    }

    closeModal = () => {
        this.props.close();
    }

    changeText = (val) => {
        this.props.changeText(val);
    }

    changeAnswer = (val) => {
        this.props.changeAnswer(val);
    }

    changeTag = (val) => {
        this.props.changeTag(val);
    }

    changeCompany = (val) => {
        this.props.changeCompany(val);
    }

    render() {
        return (
            <Modal
                isOpen={this.props.open}
                onRequestClose={this.closeModal} >

                <TextInput
                    hintText="Question"
                    change={this.changeText} />
                <TextInput
                    hintText="Answer"
                    change={this.changeAnswer} />
                <TextInput
                    hintText="Tag"
                    change={this.changeTag} />
                <TextInput
                    hintText="Company"
                    change={this.changeCompany} />
                <Button label="Create Question" onSubmit={this.createQuestion} disabled={false}/>
                <Button label="Cancel" onSubmit={this.closeModal} disabled={false}/>
            </Modal>
        );
    }
}

export default AddQuestionModal;

点击

Answer 1

它的发生是因为每次更改都会导致您调用 setState 方法并更改主要组件的状态。每次检测到组件的状态发生变化时，React 都会调用组件的渲染函数。

• 输入上的 onChange 事件绑定(bind)到主组件上的方法
• 每个方法调用setState
• 这会触发渲染调用
• 这会触发对 renderData 的调用

React 允许您通过覆盖 shouldComponentUpdate 来更改此设置功能。默认情况下，此函数始终返回 true，这将导致调用 render 方法。您可以更改它，以便通过将新状态与旧状态进行比较，只有对状态的某些更改会触发重定向。