Оба диспетчера ниже не отображаются в объекте 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>
  )
}
0
Sean D 20 Ноя 2018 в 21:40

1 ответ

Лучший ответ

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

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

1
Zeke Hernandez 20 Ноя 2018 в 20:12