React应用中传递API参数时出现undefined对象问题排查

看起来你遇到的问题根源在于字段名称不匹配，导致action里拿到的flyFrom和flyTo都是undefined，咱们一步步理清楚：

核心问题：字段名不对应 #

你在容器组件里创建的query对象结构是这样的：

const query = { from : this.state.from, to : this.state.to };

也就是说这个query包含的键是from和to，但在action.js的fetchPlaces方法里，你却试图访问query.flyFrom和query.toCity——这两个键在传入的query里根本不存在，所以自然会返回undefined。

两种修正方案 #

你可以根据需求选择其中一种：

方案1：修改action中的字段引用，匹配组件传入的query结构

如果API接受的参数名就是flyFrom和flyTo，但组件里的query用了from和to，那直接把action里的字段换成对应的值即可：

var skypicker = { 
  flyFrom : query.from,  // 对应组件query里的from
  flyTo : query.to       // 对应组件query里的to
};

方案2：在组件中直接创建符合API要求的query结构

如果希望从组件传递的参数就直接匹配API需要的字段名，那修改组件里的query创建逻辑：

// 组件里的query直接用API需要的键名
const query = { flyFrom: this.state.from, flyTo: this.state.to };
// 这样action里就可以直接用
var skypicker = { 
  flyFrom : query.flyFrom, 
  flyTo : query.flyTo 
};

额外检查点 #

除了字段匹配，你还可以做这两步验证确保流程没问题：

• 在组件的表单提交函数里，先console.log(this.state)确认from和to已经正确获取了输入框的值；
• 在fetchPlaces方法开头加console.log(query)，确认传入的参数确实包含你需要的字段和值。

内容的提问来源于stack exchange，提问作者S. N