在 JSX 中反应不重新加载功能

Question

我正在使用 react-redux。

我有以下 JSX（仅包括相关的 sn-ps）：

  getQuestionElement(question) {
     if (question) {
       return <MultiChoice questionContent={this.props.question.question} buttonClicked={this.choiceClicked} />
     }
     else {
      return (
        <div className="center-loader">
          <Preloader size='big' />
        </div>
      )
    }
  }
  render() {
    return (
      <div>
        <Header />
        {
            this.getQuestionElement(this.props.question)
        }
      </div>
     ) 
  }
function mapStateToProps({ question }) {
  return { question };
}

export default connect(mapStateToProps, questionAction)(App);

当动作触发时，reducer 更新问题道具

this.props.question

我期待 {this.getQuestionElement(this.props.question)} 重新加载并呈现新问题。

然而这并没有发生。我不能以这种方式放置一个函数来让它重新加载吗？

我的 MultiChoice 组件：

import React, { Component } from 'react';
import ReactHtmlParser from 'react-html-parser';
import './questions.css';

class MultiChoice extends Component {
    constructor(props) {
        super(props);
        this.state = {
            question: this.props.questionContent.question,
            answerArray : this.props.questionContent.answers,
            information: null
        }
        this.buttonClick = this.buttonClick.bind(this);
    }
    createButtons(answerArray) {
        var buttons = answerArray.map((element) => 
            <span key={element._id} onClick={() => { this.buttonClick(element._id) }} 
            className={"span-button-wrapper-25 " +  (element.active ? "active" : "")}>
                <label>
                    <span>{element.answer}</span>
                </label>
            </span>
        );
        return buttons;
    }
    buttonClick(id) {
        var informationElement;
        this.props.buttonClicked(id);
        var buttonArray = this.state.answerArray.map((element) => {
            if (element._id === id ){
                element.active = true;
                informationElement = element.information;
                return element;
            }
            else{
                element.active = false;
                return element;
            }
        });
        this.setState({
            answerArray: buttonArray,
            information: informationElement
        })
    }
    render() {
        return (
            <div className="question-container">
                <div className="question-view">
                    <div className="icon-row">
                        <i className="fa fa-code" />
                    </div>
                    <div className="title-row">
                        {this.state.question}
                    </div>
                    <div className="button-row">
                        {this.createButtons(this.state.answerArray)}
                    </div>
                    <div className="information-row">
                        {ReactHtmlParser(this.state.information)}
                    </div>
                </div>
            </div>
        );
    }
}

export default MultiChoice;

QuestionAction.js

import axios from "axios";
import { FETCH_QUESTION } from "./types"; 

export const fetchQuestion = (questionId, answerId) => async dispatch => {
    let question = null;
    if (questionId){
        question = await axios.get("/api/question/next?questionId=" + questionId + "&answerId=" + answerId);
    }
    else{
         question = await axios.get("/api/question/next");

    }
    console.log("question", question);
    dispatch({ type: FETCH_QUESTION, payload: question  }); 
  };

questionReducer.js

import {FETCH_QUESTION } from "../actions/types";

  export default function(state = null, action) {
    switch (action.type) {
      case FETCH_QUESTION:
        console.log("payload", action.payload.data);
        return { question: action.payload.data, selected: false };
      default:
        return state;
    }
  }

index.js（组合减速器）

import { combineReducers } from 'redux';
import questionReducer from './questionReducer';

export default combineReducers({
    question: questionReducer
});

和我的切入点： index.js

const store = createStore(reducers, {}, applyMiddleware(reduxThunk));

ReactDOM.render(
    <Provider store={store}>
        <App /> 
    </Provider>,
    document.getElementById('root')
);
registerServiceWorker();

请求的 console.log 响应：

  render() {
    console.log("Stackoverflow:", this.props.question)
    .....

点击按钮后（和reducer更新，console.log更新，但是

            this.getQuestionElement(this.props.question)

不会重新渲染

Answer 1

MultiChoice 组件不应将他的props 存储在构造函数中的state 中，您有两个选择：

处理 componentWillReceiveProps 中的 props 变化以更新状态：

class MultiChoice extends Component {
    constructor(props) {
        super(props);
        this.state = {
            question: this.props.questionContent.question,
            answerArray : this.props.questionContent.answers,
            information: null
        }
        this.buttonClick = this.buttonClick.bind(this);
    }

    componentWillReceiveProps(nextProps) {
       this.setState({ 
         question: nextProps.questionContent.question,
         answerArray : nextProps.questionContent.answers,
         information: null
       });
    }

我们必须继续使用构造函数来设置文档中的初始状态：

React 不会使用初始 props 调用 componentWillReceiveProps() 在安装过程中。

第二个选项：通过没有 state 并仅使用他的 props 来渲染某些内容（在您的组件中进行一些更深入的更改，尤其是处理“活动”元素，它必须由父组件处理）。