javascript - 在 redux 中显示初始状态？

Question

我有一个简单的 redux/react 应用程序。它工作正常，除了它不显示初始状态(用户分数)。感谢您的帮助! reducer 如下:

  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,