时间戳

首页 > 解决方案 > Redux 连接有效，但现在适用于该州的所有属性

reactjs - Redux 连接有效，但现在适用于该州的所有属性

问题描述

我的问题是props.val它应该可以正常工作，但props.name不能。谁能帮我弄清楚为什么？

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

const dummy = props => {
  return (
    <div className="container">
      <Device
        name={props.name[0]}
        value={props.val[0]}
      />
      <Device name={props.name[1]} value={props.val[1]} />
      <Device name={props.name[2]} value={props.val[2]} />
    </div>
  );
};

const mapStateToProps = state => {
  return {
    val: state.msgValue,
    name: state.name
  };
};

export default connect(mapStateToProps)(dummy);

在 redux devtools 中，state看起来像这样：

state = {
  msgValue: [23, 34, 45],
  name: ['item1', 'item2', 'item3']
};

编辑：我在错误的地方派出了行动，当我在正确的地方派出行动时，一切都好。

标签： reactjsredux

解决方案

我在您的代码中看到的唯一问题是访问索引为 3 的数组。状态数组长度仅为 3，但您正在访问不存在的索引 3 元素

所以从你的组件中删除下面的代码

  <Device name={props.name[3]} value={props.val[3]} />

也做这个条件检查

    {Array.isArray(props.name) && Array.isArray(props.val) && props.name.length && props.val.length && (
    <div className="container"> <Device
        name={props.name[0]}
        value={props.val[0]}
      />
      <Device name={props.name[1]} value={props.val[1]} />
      <Device name={props.name[2]} value={props.val[2]} />
      </div>
     )}

此外，您确保您只访问可用的索引

推荐阅读