Reactjs 在React/Redux中的组件之间传递数据

我是一个新手，正在尝试构建一个应用程序，将足球运动员分为两个队，并且很难将数据从一个组件传递到另一个组件

我安装了redux和react redux

在my reducer.js中，我获取一个玩家列表并对其进行洗牌，将洗牌后的列表添加到状态：

const shufflePlayers = (state) => {
  return {
    ...state,
    shuffledList: [
      ...state.playersList.sort(() => Math.random() - 0.5)
    ]
  }
}

然后在“src/components/DisplayTeams.index.js”中，我将“shuffledList”数组映射到道具：

import { connect } from "react-redux";
import DisplayTeams from "./DisplayTeams";

const mapStateToProps = (state) => {
  return {
    shuffledList: state.shuffledList,
  };
};

export default connect(mapStateToProps)(DisplayTeams);

最后，在“src/components/DisplayTeams.js”中，我尝试在列表中呈现“shuffledList”数组：

import React from 'react';
import '../../App.css';

const DisplayTeams = ({ shuffledList }) => (

  <div>
    <ul>
      {shuffledList.map((player, index) => (
        <li key={index}>{player.name}</li>
      ))}
    </ul>
  </div>

);

export default DisplayTeams;

从“React”导入React；
导入“../App.css”；
constdisplayteams=（{shuffledList}）=>(

{shuffledList.map（（玩家，索引）=>(
{player.name}
))}

);
导出默认显示团队；

但是我得到了TypeError:无法读取未定义的属性“map”，这表示“shuffledList”数组为空或根本没有设置

---

任何帮助都将不胜感激

上面的代码看起来不错。在分派操作时，您可以在初始状态和Redux存储中检查shuffledList。

两件事：

您应该添加一个初始状态，您可以直接在reducer文件中设置它

 const initialState = {
     // other reducer parts here
     shuffledList: []
 }

减速器应该检查动作类型，否则它将在任何动作下运行。大概是这样的：

 const shufflePlayers = (state = initialState, action) => {
    switch (action.type) {

       case actionTypes.SHUFFLE_LIST: {
           // use a new array, avoid mutating the previous state
           const sortedList = [...state.playersList].sort(() => Math.random() - 0.5)

           return {
               ...state,
               shuffledList: sortedList
           }
       }

 }

---

您不应复制状态中的数据，列表和shuffledList是相同的数据，但shuffledList是列表的计算结果

您可以使用选择器从列表计算无序列表，以防止它在渲染时重新计算。只要列表不变，您可以使用“重新选择”（无论如何都应该使用该选项）并记忆无序结果

const{Provider，useSelector}=ReactRedux；
const{createStore，applyMiddleware，compose}=Redux；
const{createSelector}=重新选择；
常量初始状态={
列表：[1,2,3,4,5,6,7,8,9,10,11,12]，
};
const reducer=（state=initialState）=>state；
//选择器
const selectList=（state）=>state.list；
//如果state.list发生更改，则它将再次洗牌
const selectShuffledList=createSelector(
[选择列表]，
（列表）=>[…列表].sort（（）=>Math.random（）-0.5）
);
const selectTeams=createSelector(
[SelectsShuffledList，（u，size）=>size]，
（随机列表，团队规模）=>{
施工队=[]；
shuffledList.forEach（（项目，索引）=>{
如果（索引%teamSize==0）{
团队。推送（[]）；
}
团队[teams.length-1]。推送（项目）；
});
返回队；
}
);
const selectTeamsCurry=（团队规模）=>（状态）=>
选择团队（状态、团队规模）；
//使用redux开发工具创建存储
康斯特康塞恩汉斯酒店=
窗口。uuu REDUX_vtools_uextension_uuucompose_uu124; COMPOSE；
const store=createStore(
减速器，
初始状态，
复合致癌物(
applyMiddleware（（）=>（n）=>（a）=>n（a））
)
);
常量应用=（）=>{
//您可以使用setCount重新渲染应用程序
const[count，setCount]=React.useState（0）；
//设置计数对团队没有影响，因为
//state.list未更改，已选择ShuffledList
//将使用已记忆的洗牌结果
const teams=使用选择器（selectTeamsCurry（3））；
返回(
设置计数（（w）=>w+1）}>
重新呈现{count}
{JSON.stringify（团队，未定义，2）}
);
};
ReactDOM.render(
,
document.getElementById（'root'））
);

你有控制台吗？在mapState中记录（状态）以查看它是什么？这一行
shuffledList:state.shuffledList
似乎根本不正确，所以是的，只是看看你的状态是什么样子的问题。shuffledList的初始状态是什么？请注意，在
ShuffledPlayers
函数中，
shuffledList:[…state.playersList.sort（）]
变异原始
状态.playersList
数组-排序前需要复制。sort（）变异原始数组：
shuffledList:[…state.playersList].sort（）
state.shuffledList是state.playersList的副本，您不应将值保存在可以从state计算的状态中，而应使用选择器。