时间戳

首页 > 解决方案 > 无法从 mapsDispatchToProps 访问“道具”

javascript - 无法从 mapsDispatchToProps 访问“道具”

问题描述

我正在尝试将输入值从我的组件传递给我的 redux 操作中的函数。我能够获得函数道具中的值。但是，道具没有传递到return dispatch =>函数中。有没有办法实现这个目标？

动作.js

function fetchData(url){
  return fetch(url)
            .then(res => res.json())
            .catch(console.log())
}

export function getFilteredCharacters(input) {
  console.log(input); //Shows props in console
  return (dispatch) => {

    console.log(chars); //Doesn't show props in console
    for (let i=1; i<=9; i++) {
      requests.push(fetchData('https://swapi.co/api/people/?page=' + i));
    }

    Promise.all(requests)
    .then(data => {
      let charactersAll = [];
      let characterFiltered = [];
      for (let i=0; i<=8; i++) {
        charactersAll.push(...data[i].results);
      }
      for (let i=0; i < charactersAll.length; i++) {
        if (charactersAll[i].name.includes(input)) { // This is where I need the props.
          characterFiltered.push(charactersAll[i]);
        }
      }
      dispatch(setFilteredCharacters(characterFiltered));
    })
  }
}

export function setFilteredCharacters(characterFiltered) {
  return {
    type: SET_CHARACTERS_FILTERED,
    characterFiltered
  }
}

组件/FilterInput.js

import React from 'react';
import { connect } from 'react-redux';
import { getFilteredCharacters } from '../reducer/character/actions';


const FilterInput = ({ setFilter }) => {

  return (
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">Name</span>
      </div>
      <input type="text" aria-label="Name" className="form-control" onChange={e => getFilteredCharacters(e.target.value)} />
    </div>
  )
};

const mapDispatchToProps = dispatch => ({
  getFilteredCharacters(input) {}
});

export default connect(null, mapDispatchToProps)(FilterInput);

感谢任何人的洞察力。

标签： javascriptreactjsredux

解决方案

这是正确的方法

const mapDispatchToProps = dispatch => ({
  getFilteredCharacters: (input)=>dispatch(getFilteredCharacters(input))
});

或者干脆

const mapDispatchToProps = {getFilteredCharacters}

目前，您正在直接在 FilterInput 中调用 getFilteredCharacters。为它添加一个 props 参数

const FilterInput = ({ setFilter, getFilteredCharacters }) => {
//...
}

推荐阅读