无法从反应组件上的 mapStateToProps 获取值答案

【问题标题】：cannot get values from mapStateToProps on react component无法从反应组件上的 mapStateToProps 获取值
【发布时间】：2021-05-03 04:15:24
【问题描述】：

为什么我不能从 mapStateToProps 访问 descriptionList 有点奇怪，因为我将操作称为 fetchDescription，但我不确定为什么在组件中返回未定义的 descriptionList

这里是 console.log，显示列表在那里：

这是我的组件：

从 '../../actions/actions' 导入 { fetchDescription }；

const Description = (props) => {
const { descriptionList } = props;
 useEffect(() => { 
     props.fetchDescription();
     console.log("Prop", descriptionList) // return undefined
    },[]);

    return (
        <div>
            {descriptionList}
        </div>
    );
};

  const mapStateToProps = ({descriptionList}) => {

    console.log("mapStateToProps", descriptionList)
    return descriptionList
  };
  export default connect(mapStateToProps, { fetchDescription })(Description);

【问题讨论】：

你试过在功能组件中使用 Redux Hooks 吗？它更简单，工作方式相同

标签： javascript reactjs redux ecmascript-6 react-redux

【解决方案1】：

您的 mapStateToProps 函数应该返回一个包含组件所需数据的普通对象。

尝试下一个方法：

const mapStateToProps = ({descriptionList}) => {
    console.log("mapStateToProps", descriptionList)
    return { descriptionList };
  };

https://react-redux.js.org/using-react-redux/connect-mapstate

【讨论】：

我忘了添加为对象，这是我的初始代码：const mapStateToProps = (state) => { return { descriptionList: state. descriptionList }; 我以这种方式添加只是为了控制台记录结果。但是正在重新调整初始状态，descriptionList 现在只是空的。 ;|

【解决方案2】：

我认为你的问题在于结果的迭代：

{
    return props.descriptionList.map(descriptionLi => {
      return (
        <div className="item" key={descriptionLi.id}>
          <div className="content">
            {descriptionLi.title}
            <div className="description">{descriptionLi.description}</div>
          </div>
        </div>
      );
    }

然后在 mapStateToProps 上尝试类似Object.value 的方法来获得一个可以用.map 迭代的数组

const mapStateToProps = state => {
  return { descriptionList: Object.values(state.descriptionList) };
};

export default connect(
  mapStateToProps,
  { fetchDescription }
)(Description);

【讨论】：