代码之家 › 专栏 › 技术社区 › Giulia

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

react-redux reactjs

Giulia · 技术社区 · 7 年前

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

减速机在这里:

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")
);

我在mapstatetrop中用“机器”替换了“设备”,如下所示。我现在得到一个不同的错误:
未知类型错误:this.props.machines.map不是函数

非常感谢你提前!

3 回复 | 直到 7 年前

devserkan 7 年前

如果不选择特定的、好的状态,命名Redux状态可能会让人困惑:) 你有一个全球性的国家 state . 在那里有一个reducer,它持有一个对象的状态,并且它有一个名为 machines

你用你的 combineReducers 作为 机器

状态 :全局状态
state.machines
state.machines.machines :这是保存数组的对象属性。

这是令人困惑的:)但这还不够令人困惑,我相信,因为你使用了 mapStateToProps

return {
    equipment: state.machines,
}

你在这里做什么?你打开你的 状态机 equipment . 那么,如果你想你应该使用这里的财产 this.props.equipment.machines . 所以,如果你用博鲁比的建议,你就能解决你的问题。这就是为什么我对他/她的答案投了高票,但我想确定,并要求你的其他配置。

现在,你变了 地图状态

return {
  machines: state.machines,
}

你现在拥有的是: . 你应该用 this.props.machines.machines .

同样,选择更好的名字可能会有用:)

是啊,很有趣。前段时间我在学红字时也犯了同样的错误,我也自嘲道:) state.someState.someState.foo.bar 天哪!然后我试着想出更好的名字。

我不知道你在这里的最终愿望,但你用 设备 一次,也许州名可以是 equipments

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


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

现在,当您使用此状态时,您将使用: this.props.equipments.machines , this.props.equipments.cars 等等。

状态机 你的状态应该是这样的:

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

你将以 this.props.machines[0]

borube 7 年前

你把减速机映射到一个叫做设备的道具上。你需要这样做。道具。设备。机器。地图

user9083082 user9083082 7 年前