Javascript 如何将参数从组件传递到redux操作

我试图将国家名称从React组件传递到Redux中的操作，但当它到达操作创建者时，它将变得未定义。我认为这与组件下面的mapDispatchToProps（）部分有关，但我对Redux非常陌生，所以我不能完全确定

它从API中获取国家列表ok，但当我想将所选国家返回到Actions.js时，该国家将变得未定义

Component.js

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import {
  getCountryCasesAction,
  getAllAvailableCountriesAction,
} from "../redux/Actions";

import { Form } from "semantic-ui-react";

function CasesByCountry({
  countryOptions,
  getAllAvailableCountries,
  getCountryCases,
}) {
  useEffect(() => {
    getAllAvailableCountries();
  }, [getAllAvailableCountries]);

  const onDropdownOptionSelect = (e, result, country, countryData) => {
    console.log(result.value);
    getCountryCases(result.value);
  };

  return (
    <div>
      <Form.Dropdown
        placeholder="Select Country"
        fluid
        selection
        search
        onChange={onDropdownOptionSelect}
        options={
          countryOptions &&
          countryOptions.map((c) => {
            return {
              key: c.ISO2,
              text: c.Country,
              value: c.Country,
            };
          })
        }
      />
    </div>
  );
}

const mapStateToProps = (state) => {
  return {
    countryOptions: state.data,
    countryData: state.data,
  };
};

const mapDispatchToProps = {
  getAllAvailableCountries: getAllAvailableCountriesAction,
  getCountryCases: getCountryCasesAction,
};

export default connect(mapStateToProps, mapDispatchToProps)(CasesByCountry);

Reducer.js

import {
  GET_WORLDWIDE_SUMMARY,
  GET_ALL_AVAILABLE_COUNTRIES,
  GET_COUNTRY_CASES,
} from "./Actions";

const initialState = {
  data: "",
};

export const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case GET_WORLDWIDE_SUMMARY:
      console.log(action.payload);
      return {
        ...state,
        data: action.payload,
      };

    case GET_ALL_AVAILABLE_COUNTRIES:
      console.log(action.payload);
      return {
        ...state,
        data: action.payload,
      };

    case GET_COUNTRY_CASES:
      console.log(action.payload);
      return {
        ...state,
        data: action.payload,
      };

    default:
      return state;
  }
};

---

你能试着这样做吗

//actions.js
导出常量getCountryCasesAction=（国家）=>async(
派遣，
getState
) => {
const response=等待axios.get(
`https://api.covid19api.com/dayone/country/${country}/状态/已确认`
);
console.log（“CountryCaseAction”，响应）；
退货({
类型：获取国家/地区案例，
有效载荷：response.data，
});
};

//CasesByCountry.js
从“React”导入React，{useffect}；
从“react redux”导入{useDispatch，useSelector}；
进口{
getCountryCasesAction，
获取所有可用国家信息，
}来自“./redux/Actions”；
从“语义ui反应”导入{Form}；
函数CasesByCountry（）{
const dispatch=usedpatch（）；
const availableCountries=useSelector（（状态）=>state.availableCountries）；
const countryCases=useSelector（（state）=>state.countryCases）；
useffect（（）=>{
调度（getAllAvailableCountriesAction（））；
}，[发送]；
国家/地区的常量选项=
可用国家&&
可用国家/地区地图（（国家/地区）=>{
返回{
关键字：country.ISO2，
文本：国家，国家，
价值观：国家，国家，
};
});
控制台日志（countryCases）；
返回(
调度（getCountryCasesAction（e.value））}
选项={optionForCountries}
/>
);
}
导出默认案例b国家；

//reducer.js
进口{
获取世界各地的信息摘要，
获取所有可用的国家/地区，
获取国家/地区案例，
}来自“/行动”；
常量初始状态={
数据：“，
可用国家：“，
国家案例：“，
};
export const rootReducer=（state=initialState，action）=>{
开关（动作类型）{
案例全球获取\u摘要：
返回{
……国家，
数据：action.payload，
};
案例获取所有可用国家/地区：
返回{
……国家，
可用国家/地区：action.payload，
};
案例获取\国家\案例：
返回{
……国家，
countryCases:action.payload，
};
违约：
返回状态；
}
};

您似乎以错误的方式进入country property

我在CaseByCountry.js文件中做了一些更改

...

  return (
    <div>
      <Form.Dropdown
        placeholder="Select Country"
        fluid
        selection
        search
        onChange={(result, e) => getCountryCases(e.value)}
        //{(result) => dispatch(getCountryCases(result.value))}
        options={
          countryOptions &&
          countryOptions.map((c) => {
            return {
              key: c.ISO2,
              text: c.Country,
              value: c.Country,
            };
          })
        }
      />
    </div>
  );
}
 ...

const mapDispatchToProps = (dispatch) => ({
  getAllAvailableCountries: () => dispatch(getAllAvailableCountriesAction),
  getCountryCases: country => dispatch(getCountryCasesAction(country)),
});

国家不再是未定义的。但是出现了一个新的错误。由于这不在问题的范围之内，我就不提了

---

请注意，我只复制了我所做更改的部分。

console.log（响应）的结果是什么inside

getCountryCasesAction（）

？它记录了我从下拉菜单中选择的国家，这就是我想要传递给Actions的内容。js请告诉我解决方案是否有效。好的，谢谢，我想你技术上回答了这个问题。祝你好运。评论不是用来讨论的；这段对话已经结束。

...

  return (
    <div>
      <Form.Dropdown
        placeholder="Select Country"
        fluid
        selection
        search
        onChange={(result, e) => getCountryCases(e.value)}
        //{(result) => dispatch(getCountryCases(result.value))}
        options={
          countryOptions &&
          countryOptions.map((c) => {
            return {
              key: c.ISO2,
              text: c.Country,
              value: c.Country,
            };
          })
        }
      />
    </div>
  );
}
 ...

const mapDispatchToProps = (dispatch) => ({
  getAllAvailableCountries: () => dispatch(getAllAvailableCountriesAction),
  getCountryCases: country => dispatch(getCountryCasesAction(country)),
});

export const getCountryCasesAction = (country) => async (
  dispatch,
  getState
) => {
  console.log("getCountryCasesAction", country);
  const response = await axios.get(
    `https://api.covid19api.com/dayone/country/${country}/status/confirmed`
  );
  console.log(response);
  return dispatch({
    type: GET_COUNTRY_CASES,
    payload: response.data,
  });
};