Question

我在应用程序内部使用Redux。
我在reducer内设置了初始状态，但显然不正确，因为出现以下错误：
TypeError：无法读取未定义的属性“地图”

这是减速器：

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内部将“设备”替换为“机器”，如下所示。我现在收到另一个错误：
未捕获的TypeError：this.props.machines.map不是函数

我需要更改什么？我被困住了。
非常感谢！

Answer 1

您将减速器的“机器”映射到一个称为“设备”的道具。您需要执行this.props.equipment.machines.map

Answer 2

在mapStateToProps中将设备名称更改为“ machines”

Answer 3

如果您不选择特定的好状态，则命名Redux状态可能会造成混淆：) 您的全局状态为state。在那儿有一个化简器，它拥有一个作为对象的状态，并且它具有一个名为machines的属性。

您可以再次使用combineReducers函数作为machines打开此状态。现在您有了类似的东西。

state：全局状态
state.machines：计算机处于您正在使用reducer初始化的全局状态。
state.machines.machines：这是保存数组的对象属性。

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

return {
    equipment: state.machines,
}

您在这里做什么？您以state.machines的状态打开equipment状态到组件。然后，如果要在此处访问machines属性，则应使用this.props.equipment.machines。因此，如果您使用@borube的建议，则可以解决您的问题。这就是为什么我赞成他/她的回答，但是我想确定并询问您其他配置的原因。

现在，您像这样更改了mapStateToProps：

return {
  machines: state.machines,
}

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

同样，选择更好的名字可能会有用：）

评论后更新

是的，这很有趣。当我在学习Redux时犯了同样的错误时，我也对自己笑了：) state.someState.someState.foo.bar天哪！然后我试图考虑更好的名字。

这完全取决于您。减速器的定义是什么？考虑一个好的通用名称（对于该reducer状态当然是通用的），然后在该状态下使用属性。

我不知道您在这里的最终愿望，但是您曾经使用过equipment，那么州名称可以是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等来访问每个设备。

要使用state.machines，您的状态应为：

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

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

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

3 个答案: