Question

我有一个简单的redux / react应用程序。它工作正常，除了它没有显示初始状态（用户得分）。感谢任何帮助！减速机如下：

  const initialState = [{userScore: 0, computerScore :0}];
 const dataReducer = (state = initialState, action) => {
 switch (action.type) {
  case 'USER_WINS':
  return [
    {
      userScore: state.userScore + 1,
      computerScore: state.computerScore

    }
  ]
  case 'COMPUTER_WINS':
    return [
      {
        userScore: state.userScore,
        computerScore: state.computerScore +1
      }
    ]
default:
  return state
}
}

主要课程如下：

    class Interface extends Component{
  constructor(props) {
  super(props);
  this.computerChoice = this.computerChoice.bind(this);
  this.userChoice = this.userChoice.bind(this);
}

computerChoice () {
  var choicesArray = ['Paper','Rock','Scissors'];
  var computerResponse = choicesArray[Math.floor(Math.random() * 3)];
   return computerResponse;
}

userChoice (userInput){
    var computerInput = this.computerChoice();
    if (
        (userInput === 'Rock' && computerInput === 'Scissors')||
        (userInput === 'Paper' && computerInput === 'Rock') ||
        (userInput === 'Scissors' && computerInput === 'Paper')
    ) {
         this.props.userWinsGame();
    } else {

    }
  }
  render() {
  const value  = this.props;
    return (
      <div>

这是我想要显示分数的地方：

         Human: {value.userScore}
         Computer: {value.computerScore}
      <br/>
       <button value='Rock' onClick={(e) => this.userChoice(e.target.value)} >Rock</button>
      <button value='Paper' onClick={(e) =>this.userChoice(e.target.value)} >Paper</button>
      <button value='Scissors' onClick={(e) =>this.userChoice(e.target.value)} >Scissors</button>
      </div>
      )
     }
 }

一切都在这里发送：

    const render = () => ReactDOM.render(
<Interface
  value={store.getState()}
    userWinsGame = {() => store.dispatch({ type: 'USER_WINS' })}
    computerWinsGame = { () => store.dispatch({ type: 'COMPUTER_WINS' 
})}
 />,
root

）

感谢你的帮助 - 一切正常但显示出初始状态！

Answer 1

主要问题是，为什么你的initialState数组？为什么你的state根本就是一个阵列？我认为您应该考虑将其保留为对象。

无论如何 - 当你的initialState是一个数组时：

const initialState = [{userScore: 0, computerScore :0}]，

您正尝试设置键的值，就像state将是对象一样。

userScore: state.userScore + 1,

state.userScore将返回undefined，并向其添加1，将投放NaN。

正如我上面所述，我强烈建议你使用对象作为你的状态。但是，如果您确实希望它是一个数组，请使用正确的表示法：

userScore: state[0].userScore + 1,

在redux中显示初始状态？

1 个答案: