Question

我是Redux的新手，所以我可能在这里缺少一些东西...

redux / reducers / schools.js：

export const SET_SELECTED = 'schools/SET_SELECTED';

const initialState = {
  selected: {},
  schools: []
};

export default function schools(state = initialState, action) {
  switch (action.type) {
    case SET_SELECTED:
      return {
        ...state,
        selected: action.payload
      };
    default:
      return state;
  }
}

export function setSelected(school) {
  return {
    type: SET_SELECTED,
    payload: school
  };
}

容器/Search.js：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { setSelected } from '../redux/reducers/schools';
import SchoolCard from '../components/SchoolCard';

class Search extends Component {
  setSelectedSchool(school) {
    this.props.dispatch(setSelected(school)); // Error here
  }

  renderShools(schools) {
    return schools.map(school => {
      return (
        <div className="column is-8 is-offset-2" key={school.emis}>
          <SchoolCard school={school} setSelected={this.setSelectedSchool} />
        </div>
      );
    });
  }

  render() {
    return (
      <div className="container">
        <div className="columns">{this.renderShools(this.props.schools)}</div>
      </div>
    );
  }
}

export default connect(state => ({
  schools: state.schools.schools
}))(Search);

在setSelectedSchool()中的Search.js运行时，出现以下错误：

未捕获的TypeError：无法读取未定义的属性'dispatch'...

我在做什么错/我在想什么？

Answer 1

下面的代码代表如何映射到道具然后调用dispatch的示例：

mapDispatchToProps

如果您不执行{{1}}，则this.props.dispatch将是未定义的。

Answer 2

export default connect(state => ({
  schools: state.schools.schools
}),
(dispatch)=>{return {setSelected:(data)=>(dispatch)({type:"SET_SELECTED",payload:data})}}
)(Search);

您可以给2个对象进行连接

1. mapStateToProps {
      schools: state.schools.schools
    }
2(dispatch)=>{return {setSelected:(data)=>(dispatch)({type:"SET_SELECTED",payload:data})}

您还需要调度（2）以便调度功能因此，将最后一行更改为（使用连接的地方）

export default connect(state => ({
      schools: state.schools.schools
    }),
    (dispatch)=>{return {setSelected:(data)=>(dispatch)({type:"SET_SELECTED",payload:data})}}
    )(Search);

和函数调用

 setSelectedSchool(school) {
    this.props.setSelected(school); // Error here
  }

Answer 3

您需要稍微修改一下代码

containers / Search.js

loc = https://www.lavisducagou.nc/
lastmod = 2018-07-14T11:30:25+11:00
loc = https://www.lavisducagou.nc/sinscrire/
lastmod = 2018-05-03T16:58:35+11:00
loc = https://www.lavisducagou.nc/se-connecter/
lastmod = 2018-05-03T18:02:07+11:00
loc = https://www.lavisducagou.nc/mot-de-passe-oublie/
lastmod = 2018-05-03T20:33:08+11:00
loc = https://www.lavisducagou.nc/compte/
lastmod = 2018-05-03T20:36:32+11:00
...

创建actions / schoolActions.js

import  React, { Component } from 'react';
import { connect } from 'react-redux';
import * as schoolActions from '../actions/schoolActions; 
import SchoolCard from '../components/SchoolCard';

class Search extends Component {
  setSelectedSchool=(school)=> {
    this.props.setSelectedschool(school)
  }

  renderShools(schools) {
    return schools.map(school => {
      return (
        <div className="column is-8 is-offset-2" key={school.emis}>
          <SchoolCard school={school} setSelected={this.setSelectedSchool} />
        </div>
      );
    });
  }

  render() {
    return (
      <div className="container">
        <div className="columns">{this.renderShools(this.props.schools)}</div>
      </div>
    );
  }
}
export default connect(
state => ({
   schools: state.schoolReducer.schools,

}),
{ ...schoolActions }
)(Search);

创建reducers / schoolReducer.js

export function setSelectedschool(school){
    return (dispatch)=>{
         dispatch({'SET_SELECTED',school})
    }
}

无法将Redux连接到响应和调度操作

3 个答案: