Redux dispatcher未能作为支柱传递给子组件

Question

下面的两个分派器都不会出现在子程序中的props对象中(this.props只显示我传入的"Hi“字符串)。

如果我只是在App.js父组件中使用它们(作为this.props.<dispatcher()>，它们可以工作)。

    // App.js
import React, { Component } from 'react';
import './App.css';

import SelectDonation from './components/SelectDonation';

import {connect} from "react-redux";

import './semantic/dist/semantic.min.css';
import {Modal, Header, Button, Form} from "semantic-ui-react";

import Redux            from "redux";
import ReactRedux       from "react-redux";
import {log_to_console_function, set_donation_amount} from "./actions";
import store from "./reducer";


render() {
  return (
    <div className="App">    
        <SelectDonation ap="Hi"/>
    </div>
  );
}


// App.js outside render()
const map_dispatch_to_props = (dispatch) => {
  return {
    dispatch_log_to_console_function: () => dispatch(log_to_console_function()),
    dispatch_set_donation_amount : (amount) => dispatch(set_donation_amount(amount))
  }
};

export const AppWrapped = connect(map_state_to_props, map_dispatch_to_props)(App);

知道问题可能是什么吗？我的第一个想法是错过了一个进口品，但我什么也看不见。

以下是子组件

// SelectDonation.js (Child component)
import React from "react";
import {css} from "emotion";
import {Button, Modal, Form, Input, Radio} from 'semantic-ui-react';
import store from "../reducer";
export default (props) => {

  const save_donation_amount = (e) => {
    props.dispatch_log_to_console_function();
    props.dispatch_set_donation_amount(e.target.value);
    console.log(store.getState().donation_amount);
  };

  return (
    <React.Fragment>
      {console.log(props)}
      {console.log(props.ap)}
      <Button
         primary
         onClick={(e) => save_donation_amount(e)}>Next Step
      </Button>
    </React.Fragment>
  )
}

Answer 1

您的子组件SelectDonation需要显式地从App或Redux接收分派函数，以便使用这些函数。事实上，情况并非如此。您可以以传递"Hi“的方式传递这些函数，也可以将SelectDonation连接到Redux。

我不推荐这两种方法。我建议您的SelectDonation组件在按下按钮和父组件与Redux对话时通知它的父组件。查看官方文档以获得有关此方法的教程：https://reactjs.org/docs/lifting-state-up.html