Redux Connect работает, но теперь для всех свойств от государства

Question

Моя проблема в том, что 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']
};

Редактировать: Я отправил действие в неправильное место, и когда я отправил его в нужное место, все было хорошо.

Answer 1

Единственная проблема, которую я мог видеть в вашем коде, - это доступ к массиву с индексом 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>
     )}

Также убедитесь, что у вас есть доступ только к доступному индексу