将对象添加到列表时超出 React-Redux 最大调用堆栈大小

Question

我正在创建一个简单的游戏反应应用程序，当我尝试将玩家添加到我的玩家列表时，它似乎在创建一个无限循环，我不确定为什么。我尝试使用 useEffect 在初始加载时呈现播放器列表，但这没有帮助，所以我暂时删除它以简化。有什么想法可以改变我的做法吗？

App.js

import React, { useEffect } from 'react'
import {useDispatch, useSelector} from 'react-redux';
import './App.css';
import {setPlayerName, increaseCurrentPlayerId, decreaseCurrentPlayerId, addPlayerToList} from './redux/reducers/playerReducer';

function App() {
  const dispatch = useDispatch()
  const playerName = useSelector(state => state.playerName);
  const playerList = useSelector(state => state.playerList);
  const currentPlayerId = useSelector(state => state.currentPlayerId)
  

  // dispatch(addPlayerToList('Test'))
  const addPlayer = (player) => {

   dispatch(addPlayer(player))
   dispatch(setPlayerName(''))
  }

  const renderPlayerList = () => {
    if (playerList.length < 1) {
      return (
        <div>
          No Players
        </div>
      )
    } else {
      return (
        playerList.map(p => 
          <p>p.name</p>
          )
      )
    }
  }

  return (
    <div className="App">
         <input 
          type='text'
          name='playerName' 
          onChange={({ target }) => dispatch(setPlayerName(target.value))}
          required
        />
          Name<br/>
            <button type='button' 
             onClick={() => addPlayer(playerName)}
             >
            Add Player</button> <br />
        <br />
    </div>
  );
}

export default App;

playerReducer.js

export const playerNameReducer = (state = '', action) => {
    switch (action.type) {
      case 'SET_PLAYER_NAME':
        return action.data;
      default:
        return state;
    }
  };

  export const playerListReducer = (state = null, action) => {
    switch (action.type) {
      case 'ADD_PLAYER':
        return [...state, action.data];
      default:
        return state;
    }
  };

动作创作者

  export const setPlayerName = playerName => {
    return {
      type: 'SET_PLAYER_NAME',
      data: playerName,
    };
  };
  
  export const addPlayerToList = player => {
    return {
      type: 'ADD_PLAYER',
      data: player,
    };
  };

Answer 1

addPlayer 调用自身

const addPlayer = (player) => {

   dispatch(addPlayer(player))
  }

将对象添加到列表时超出 React-Redux 最大调用堆栈大小

React-Redux Maximum call stack size exceeded when adding object to list

callstack

react-redux