mapStateToProps 和 mapDispatchToProps 没有向组件发送道具

Question

请我正在处理 redux 项目，但返回到 mapStateToProps 的数据未发送到组件。 Console.log 道具未定义

LiveEvent.protoTypes = {
  event: PropTypes.object.isRequired,
  error: PropTypes.string,
};


const mapDispatchToProps = (dispatch) => { 
  return {
    getSingle: (values) => {
      console.log(Creators, "creators")
      dispatch(Creators.getOneEvent(values));
    },
  };
};

const mapStateToProps = (state) => (
  console.log(state.event.event, "state from liveEvent"),
  {
    event: state.event.event,
    error: state.event.error_message,
  }
);

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

function LiveEvent({match}, props) {
  console.log(props, "props")

有什么做错了吗

Answer 1

function LiveEvent({match}, props) {

道具 object 出现在 function 的第一个参数中。 没有任何东西作为第二个参数传递。 因此，您正在解构 props 以获取match ，然后创建一个名为props的无用变量，但与实际 props 无关。

如果您想在不解构的情况下获得整个道具 object ，请将您的代码更改为：

function LiveEvent(props) {
// Do whatever with props, including things like 
//   const { match } = props
}

或者，使用解构将您关心的道具分配给局部变量：

function LiveEvent({ match, event, error, getSingle }) {

}

Answer 2

啊，你有逗号，我把它读成控制台后面的分号。 它工作正常。

您的代码中存在各种错误。

1. 控制台在这里不起作用：

隐式返回

<LiveEvent event={...} error={...} />

要使用控制台进行调试，您必须使用大括号 use return 语句：

 const mapStateToProps = (state) => { console.log(state.event.event, "state from liveEvent"), return { event: state.event.event, error: state.event.error_message, } };

2. 在你的组件中定义 proptypes 表示组件应该传递 props。

组件道具

LiveEvent.protoTypes = { event: PropTypes.object.isRequired, error: PropTypes.string, };

此代码期望在组件本身中有道具：

 <LiveEvent event={...} error={...} />

与 redux 连接的组件不会从中获取道具，因为它的首要任务是检查并从组件本身获取道具。

因此，从您的组件中删除 proptypes，以便组件可以接收 redux 道具。