Диспетчер Redux не может передать в качестве поддержки дочерний компонент - PullRequest
Новая
       11

Диспетчер Redux не может передать в качестве поддержки дочерний компонент

0 голосов
/ 20 ноября 2018

Оба приведенных ниже диспетчера не отображаются в дочернем объекте 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>
  )
}

1 Ответ

0 голосов
/ 20 ноября 2018

Ваш дочерний компонент SelectDonation должен явно получить функцию диспетчеризации из приложения или из Redux, чтобы использовать эту функцию.Как это, это не так.Вы можете передать эти функции так же, как вы передаваете «Привет», или вы можете подключить SelectDonation к Redux.

Я бы не рекомендовал ни один из подходов.Я бы порекомендовал вашему компоненту SelectDonation уведомлять его родительский компонент, когда кнопка была нажата, и родительский компонент будет общаться с Redux.Проверьте официальные документы для учебника по этому подходу: https://reactjs.org/docs/lifting-state-up.html

...