开发者问题收集

尽管设置了初始状态,ReactJs 仍然无法读取未定义的属性“map”?

2018-08-17
104


我在我的应用程序中使用 Redux。
我在 Reducer 中设置了初始状态,但显然有些地方不正确,因为我收到以下错误:
Uncaught TypeError:无法读取未定义的属性“map”

这是 Reducer:

const initialState = {
  machines: [
    {
    id: "1",
    identifier: "My Machine 1",
    location: "My Location 1"
    }
  ]
};


export default function machines(state=initialState, action) {
  switch (action.type) {
    default:
      return state;
  }
}

这是组件:

import React, { Component } from 'react';
import {connect} from 'react-redux';


class Machines extends Component {

  createMachinesList() {
    return this.props.machines.map((machine) => {
      return (
        <table>
          <tbody>
            <tr>
              <td key={machine.id}>{machine.identifier}</td>
            </tr>
            <tr>
              <td key={machine.id}>{machine.location}</td>
            </tr>
          </tbody>
        </table>
      );
    });
  }

  render() {
    return (
      <div>
        <div className="card">
          <div className="card-header">
            Equipment
          </div>
          <div className="card-content">
            {this.createMachinesList()}
            <button>edit</button><button>delete</button>
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    equipment: state.machines,
  }
}

const mapDispatchToProps = dispatch => {
  return {
  }
}


export default connect(mapStateToProps, mapDispatchToProps)(Machines);

这是 Reducers/index.js

import { combineReducers } from 'redux';
import machines from "./machines";


const allReducers = combineReducers({
  machines,
})

export default allReducers;

以及 index.js 内部

let store = createStore(allReducers);

ReactDOM.render(
  <Provider store={store}>
    <HashRouter>
      <Switch>
        {indexRoutes.map((prop, key) => {
          return <Route to={prop.path} component={prop.component} key={key} />;
        })}
      </Switch>
    </HashRouter>
  </Provider>,
  document.getElementById("root")
);

编辑: 我已按照以下建议将 mapStatetoProp 中的“equipment”替换为“machines”。我现在得到了一个不同的错误:
Uncaught TypeError:this.props.machines.map 不是一个函数

我需要改变什么?我被困在这个问题上了。
提前非常感谢!

3个回答

您将减速器“机器”映射到名为设备的道具。您需要执行此操作。props.equipment.machines.map

borube
2018-08-17

如果您不选择特定的,好的,命名redux状态可能会令人困惑:) 您有一个全局状态,即 状态 。您在那里有一个还原器,并拥有一个是对象的状态,并且它具有名为 Machines

的属性再次函数为 机器 。现在您有类似的东西。

  • 状态 :全局状态
  • state.machines :机器状态处于您的全局状态,您将使用还原器初始化。
  • state.machines.machines :这是保存您的数组的对象属性。

这很令人困惑:)但是,这还不够困惑,我相信,因为您在第一个版本中使用了 mapstatetoprops 函数:

929183890

您在这里做什么?您将 state.machines 状态打开,以 设备 为组件。然后,如果要到达 机器 属性,则应在此处使用 this.props.equipment.machines 。因此,如果您使用 @Borube的建议,您将解决问题。这就是为什么我向他/她的答案投票,但我想确定并要求您的其他配置。

现在,您更改了 mapstatetoprops 这样:

803115120

您现在拥有的是: state.machines.machines 。您应该使用 this.props.machines.machines

再次,选择更好的名称可能很有用:)

在注释后更新

是的,这很有趣。当我在学习redux时犯同样的错误:) state.somestate.somestate.foo.bar 哦,天哪,我也对自己笑了。然后我试图思考更好的名字。

这完全取决于您。您的还原器定义是什么?想想一个好的,通用的名称(当然是此还原状态的通用),然后在此状态下使用属性。

我在这里不知道您的最终愿望,但是您使用 设备 一次,那么状态名称可以是 设备 哪个是复数的?然后,您将来将拥有一个状态和一个类似的还原器?

239268889

现在,当您使用此状态时,您将使用以下方式到达每个设备: this.props.props .equipments.machinesthis.props.equipments.cars 等。成为这样的事情:

568032127

,您将以 this.props.machines [0] 或映射以获取所有项目对于此数组。如果您只保留在这里的机器,那么您也许可以使用这种方式。但是,如果还有其他设备,使其成为对象可能更好。

devserkan
2018-08-17

mapStateToProps 中将设备名称更改为 machines >

2018-08-17