React.js开发中无法将计算小费推入tip_arr且首项出现空值的问题

• 第一步：排查state初始化逻辑
  检查类组件构造函数里state的初始定义，多数这类数组带固定开头空串的问题，是初始化时误将tip_arr设为带占位值的结构，比如写成tip_arr: [""]而非空数组tip_arr: []。只要把初始值改成完全空的数组，后续推入元素时就不会残留开头的空值。
• 第二步：排查事件触发链路的额外空调用
  现在数组结构是["", item, item]，也就是空串是在第一次正常计算前被推入的，大概率是事件绑定错位：如果Add Customer按钮没有显式写type="button"，在外层存在form标签的场景下，按钮会触发表单的默认提交行为，首次提交时因为事件加载时序，计算逻辑拿到的账单输入为空，直接把空字符串当成计算结果推入数组；后续点击按钮触发的计算都是在表单默认提交被阻止的状态下执行，所以推入的元素都正常。
  修复方式：给form元素的onSubmit加上e.preventDefault()阻止默认跳转，给Add Customer按钮加上type="button"属性，从根源上避免无意义的空值计算触发。
• 第三步：排查setState的数组更新逻辑
  检查数组推入的代码段，如果写更新逻辑时误把展开数组写成了带固定占位的结构，比如this.setState(prev => ({ tip_arr: ["", ...prev.tip_arr, calculatedTip] }))，会每次都把空串固定放在数组最开头，不管之前数组是什么结构，删掉展开式里多余的空字符串占位即可。另外要避免直接用+拼接数组和计算值，这种写法会把数组转成字符串，导致格式异常。
• 第四步：排查this绑定错位问题
  如果calculate方法没有在构造函数中正确绑定this，会导致第一次调用时方法内读取的this.state.tip_arr不是组件定义的空数组，而是类作用域里定义的空字符串类属性，只有后续this绑定修正后的调用，才会正确把计算结果推入数组，自然就会出现数组第一个元素是空串、后续元素正常的结构。可以把calculate方法改成类箭头函数属性的写法，避免手动绑定时的遗漏。

快速定位方法：在calculate方法入口打印当前的输入值和组件初始state，如果第一次进方法时拿到的账单金额是空，就检查事件绑定；如果初始state的tip_arr本身带空值，就直接修正初始化代码。

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