Question

我对React-Redux应用程序有一个奇怪的问题。我的一个组件没有重新渲染道具更改，这些更改通过操作“SET_WINNING_LETTERS＆＃39;”进行更新。 github repo：https://github.com/samandera/hanged-man

setWord.js

const initialWordState = {
  word: []
};

const setWinningLetters = (wordProps) => {
  let {word, pressedKey} = wordProps;
  for (let i = 0; i < word.length; i++) {
    if (/^[a-zA-Z]$/.test(pressedKey) && word[i].letter.toUpperCase() == pressedKey) {
      word[i].visible = true;
    }
  }
  return {word};
}

const setWord = (state = initialWordState, action) => {
  switch(action.type) {
    case 'SET_WORD': return Object.assign({}, state, getWord(action.word));
    case 'SET_WINNING_LETTERS': return Object.assign({}, state, 
 updateWord(action.wordProps));
  }
  return state;
}

export default setWord;

在此功能的Index.js中触发操作

handleKeyPress(pressedKey) {
    store.dispatch({
      lettersProps: {
        word:this.props.word,
        pressedKey,
        missedLetters: this.props.missedLetters
      },
      type: 'SET_MISSED_LETTERS'
    });
    store.dispatch ({
      wordProps: {
        word:this.props.word,
        pressedKey
      },
      type: 'SET_WINNING_LETTERS'
    });
    this.showEndGame(this.props.word,this.props.missedLetters);
  };

  componentWillMount() {
    fetchWord(this.statics.maxWordLength);
    window.onkeydown = () => 
    {this.handleKeyPress(String.fromCharCode(event.keyCode))};
  }

在PrimaryContent.js中呈现获胜和失踪的Characetrs

  import React from 'react';
  import {connect} from 'react-redux';
  import store from '../reducers/store';
  import Hangedman from './Hangedman';
  import AspectRatio from './AspectRatio';
  import Puzzle from './Puzzle';
  import MissedCharacters from './MissedCharacters';

  const mapStateToProps = (store) => {
    return {
      word: store.wordState.word,
      missedLetters: store.missedLettersState.missedLetters
    }
  }

  class PrimaryContent extends React.Component {
constructor() {
  super();
}


renderDisabledPuzzles(amount){
  return Array.from({length: amount}, (value, key) => <AspectRatio parentClass="disabled" />)
}

renderLetters(word) {
  return word.map(function(letterObj, index) {
    let space = (letterObj.letter==' ' ? "disabled": '')
    return(
      <AspectRatio parentClass={space} key={"letter" + index}>
        <div id={"letter" + index}>{letterObj.visible ? letterObj.letter : ''}</div>
      </AspectRatio>
    )
  }) ;
}

render() {
  let disabledCount = this.props.puzzles - this.props.word.length;
  let disabledPuzzles = this.renderDisabledPuzzles(disabledCount);
  let WinningLetters = this.renderLetters(this.props.word);

  return (
    <div className="ratio-content primary-content">
      <Hangedman/>
      <MissedCharacters missedLetters={this.props.missedLetters}/>
      <Puzzle>
        {disabledPuzzles}
        {WinningLetters}
      </Puzzle>
    </div>
  );
 }
}
export default connect(mapStateToProps)(PrimaryContent);

MissedCharacters运作良好，而{WinningLetters}没有。动作＆＃39; SET_MISSED_LETTERS＆＃39;工作完美，而且＆＃39; SET_WINNING_LETTERS＆＃39;仅在＆＃39; SET_MISSED_LETTERS＆＃39;得到更新。这意味着当我按下一个或多个获胜的字母时，他们会赢得显示，直到我按下缺失的字母。当我按下缺失的字母时，缺失和获胜字母的父组件将重新呈现。我试图从它的父母那里把道具传递给PrimaryContent，但我也是这样。我尝试将{WinningLetters}与其自己的组件分开访问redux store，但它的工作情况更糟，即使MissedCharacters更新也会停止更新。你能发现我犯了哪个错误吗？

组件不合理地不会在道具更改时重新渲染

0 个答案: