Question

我有一个变量attackHero，其初始值为Ironman。它正确显示在页面上。在按钮上单击，我通过Redux分派将其更改为Hulk。但是更改未反映在页面中。我在这里想念东西吗？

请参见下面的代码。

import React, { Component } from 'react';
import { createStore } from 'redux';

class ReduxDemo extends Component {

    constructor(props) {
        super(props);
        this.initNukeAttack = this.initNukeAttack.bind(this);

        this.store = null;
    }

    initNukeAttack() {
        console.log("I am inside initNukeAttack");
        this.store.dispatch({type:"GREEN-ATTACK", hero: "Hulk"});
    }
    render() {
        let attackHero = "attack hero";

        // step 2 -> reducer => require state and action
        const reducer = function(state, action) {
            if(action.type === "ATTACK") {
                return action.hero;
            }
            if(action.type === "GREEN-ATTACK") {
                return action.hero;
            }
            return {p:"peace"};
        }

        //Step 1
        this.store = createStore(reducer, "PEACE");

        //step 3 -> subscribe
        this.store.subscribe(() => {
            //console.log("Store is now", store.getState());
            //console.log(store.getState());

            attackHero = this.store.getState();
        })

        //step 4 -> dispatch action
        this.store.dispatch({type:"ATTACK", hero: "Ironman"});
        //this.store.dispatch({type:"GREEN-ATTACK", hero: "Hulk"});
        return(
            <div>
                <div>{attackHero}</div>
                <button onClick={this.initNukeAttack}>Initiate Green Attack</button>
            </div>
        );
    }
}

export default ReduxDemo;

渲染的屏幕看起来像这样。

Answer 1

首先，我建议针对动作创作者，适当地跟上redux和中间件的反应。有大量可用资源。无论如何，您都是在渲染中调度一个操作，这是错误的。其次，要更新变量，您需要setState以重新呈现组件。这是您的工作代码：

class ReduxDemo extends Component {
  constructor(props) {
    super(props);
    this.initNukeAttack = this.initNukeAttack.bind(this);

    this.store = null;
    this.state = {
      attackHero: "IronMan"
    };
  }

  initNukeAttack() {
    console.log("I am inside initNukeAttack");
    this.store.dispatch({ type: "GREEN-ATTACK", hero: "Hulk" });
  }
  render() {
    // step 2 -> reducer => require state and action
    const reducer = function(state = "ironman", action) {
      if (action.type === "ATTACK") {
        return action.hero;
      }
      if (action.type === "GREEN-ATTACK") {
        return action.hero;
      }
      return state;
    };

    //Step 1
    this.store = createStore(reducer, "PEACE");

    //step 3 -> subscribe
    this.store.subscribe(() => {
      //console.log("Store is now", store.getState())

      const attackHero = this.store.getState();
      this.setState({
        attackHero
      })
    });

    //step 4 -> dispatch action
    //this.store.dispatch({ type: "ATTACK", hero: "Ironman" });
    // this.store.dispatch({type:"GREEN-ATTACK", hero: "Hulk"});
    return (
      <div>
        <div>{this.state.attackHero}</div>
        <button onClick={this.initNukeAttack}>Initiate Green Attack</button>
      </div>
    );
  }
}

Answer 2

但更改未反映在页面中

这是因为React不会重新渲染页面。

要重新渲染，您需要使用state并通过setState方法设置状态变量。

或

设置状态变量后，您需要强制将页面渲染为this.forceUpdate();

反应-变量未正确显示在页面中

2 个答案: