如何从外部修改Action.js中GetWeatherDetails的lang参数

直接调用传参（无需修改Action.js） #

你的GetWeatherDetails已经定义了带默认值的参数，直接在App.js或Weather.js里调用时传入目标lang值即可，分两种场景：

1. 仅修改lang，保留默认location（Paris）
   因为参数顺序是location在前、lang在后，要保留默认location的话，第一个参数传undefined：

// 先导入action
import { GetWeatherDetails } from './Action';

// 在组件的dispatch中调用（比如在useEffect或事件处理函数里）
dispatch(GetWeatherDetails(undefined, 'zh')); // 示例：设置为中文

2. 同时修改location和lang
   直接按顺序传入两个参数：

dispatch(GetWeatherDetails('Beijing', 'zh')); // 定位北京，语言设为中文

优化方案：改用对象参数（避免顺序混淆） #

如果后续参数增多，按顺序传参容易出错，可以修改Action.js里的函数定义，改用解构对象作为参数，这样调用时可以只传需要修改的字段：

修改Action.js中的函数：

export const GetWeatherDetails = ({ location = "Paris", lang = 'en' }) => async dispatch => {
  dispatch({ type: GET_WEATHER.PENDING });
  axios
    .get(BASE_URL, {
      params: {
        q: location,
        lang: lang,
        units: "Metric",
      }
    })
    .then(response =>
      dispatch({ type: GET_WEATHER.SUCCESS, payload: response.data })
    )
    .catch(err => {
      console.log(err.response, err);
      toast.error(err.response.data.message, {
        position: "bottom-center",
        autoClose: 2000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: false,
        draggable: false
      });
      dispatch({ type: GET_WEATHER.REJECTED, payload: err.response });
    });
};

之后在App.js/Weather.js里调用会更灵活：

// 仅修改lang
dispatch(GetWeatherDetails({ lang: 'fr' })); // 设置为法语

// 同时修改location和lang
dispatch(GetWeatherDetails({ location: "Tokyo", lang: 'ja' })); // 定位东京，语言设为日语

两种方案都能实现修改lang参数的需求，第二种更适合参数较多的场景，可读性更强。

内容的提问来源于stack exchange，提问作者Stein