Получить данные после отправки формы в React-Redux? - PullRequest
Новая
       4

Получить данные после отправки формы в React-Redux?

0 голосов
/ 21 января 2020

Я использую Redux с React Hooks, у меня есть форма, и я хочу, чтобы при отправке формы она возвращала ответ (я должен иметь возможность получить filtered_data), но когда я нажимаю кнопку отправки, она возвращает ничего, моя форма выглядит так: 

import React, { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { Wrapper, SwitchWrapper } as Style from "./Style";
import { TextInput } from "../../Components/Input/Input";
import { SwitchToggle } from "../../Components/SwitchToggle";
import { Button } from "../../Components/Button";
import { fetchLocations, FilterLocation } from "../../Redux";

const FilterForm = () => {
  const [input, setContent] = useState({
    mymoney: ""
  });

  const [checkbox, setCheckbox] = useState([]);

  const locations = useSelector(state => state.AllLocations.locations);
  const filtered_data = useSelector(state => state.Calculate.filtered_data);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchLocations());
  }, []);

  const inputOnChange = e => {
    setContent({ ...input, [e.target.name]: e.target.value });
  };

  const checkboxOnChange = e => {
    const { value } = e.target;

    let newCheckbox = [...checkbox];
    const checkIfExist = newCheckbox.find(item => item === value);

    if (checkIfExist) {
      newCheckbox = newCheckbox.filter(item => item !== value);
    } else {
      const newItem = locations.find(locationname => locationname === value);
      newCheckbox = [...newCheckbox, locationname];
    }

    setCheckbox(newCheckbox);
  };

  const onSubmit = e => {
    e.preventDefault();

    FilterLocation({ mymoney: input.mymoney, locations: checkbox });
  };

  useEffect(() => {
    dispatch(FilterLocation({ mymoney: input.mymoney, locations: checkbox }));
  }, []);

  return (
    <Wrapper>
      <div>
        <form onSubmit={onSubmit}>
          <h3>My Money</h3>
          <TextInput
            height={40}
            label="I will Spend $ ..."
            placeholder="$1, 234, 567"
            fontSize={33}
            name="mymoney"
            value={input.mymoney}
            onChange={inputOnChange}
          />
          <Button type="submit">
            Filter
          </Button>
        </form>
      </div>
      <SwitchWrapper>
        <h3>Locations</h3>
        {locations.map(locationname => {
          return (
            <SwitchToggle
              label={locationname}
              value={locationname}
              onChange={checkboxOnChange}
            />
          );
        })}
      </SwitchWrapper>
    </Wrapper>
  );
};

export default FilterForm;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Мое действие Redux похоже на: 

import axios from "axios";
import { GET_FILTERLOCATION } from "./Types";

const FilterLocation = data => dispatch => {
  axios
    .post("/filter_location", {
      locations: data.locations,
      mymoney: data.mymoney
    })
    .then(response => {
      console.log("response ", response);
      dispatch({
        type: GET_FILTERLOCATION,
        payload: response
      });
    })
    .catch(error => {
      console.log(error.message);
    });
};


export { FilterLocationi };

любая помощь, пожалуйста?

1 Ответ

2 голосов
/ 06 марта 2020

, поскольку вы используете приставку и отправляете действие, вы должны выполнить отправку следующим образом: 

const onSubmit = e => {
    e.preventDefault();

    dispatch(FilterLocation({ mymoney: input.mymoney, locations: checkbox }))
};
...