React Hooks表单集成MessageBird SMS报收件人错误如何解决

你的报错核心是收件人参数完全没有正确传入实际手机号值，存在两处明确的代码错误：

• 字符串模板语法错误：你写的'$phoneNumber.phone'是普通单引号包裹的静态字符串，JavaScript不会解析单引号内的变量表达式，实际传给MessageBird接口的是字面量字符串$phoneNumber.phone，根本不是用户输入的手机号，自然会被接口判定为无有效收件人。
• 状态赋值存在冗余包装：你给PhoneInput绑定onChange事件时，额外把组件返回的手机号字符串包成了{phone: 手机号值}的对象结构，属于不必要的嵌套，容易引发取值路径错误。
• 额外踩坑点：React的setState是异步执行的，你在phoneNumberFromForm函数里调用setPhoneNumber后立刻打印phoneNumber，拿到的永远是更新前的旧值，这个log本身没有参考价值。

按以下步骤修改代码即可恢复正常发送：

1. 移除冗余的phoneNumberFromForm包装函数，直接在PhoneInput的onChange事件里更新状态，去掉多余的对象包装：

// 替换原有PhoneInput节点
<PhoneInput 
  enableAreaCodeStretch 
  onChange={phone => setPhoneNumber(phone)}
/>

注：常用的react-phone-number-input组件onChange事件直接返回符合E.164规范的手机号字符串（格式如+8613xxxxxxxxx），正好符合MessageBird接口对手机号格式的要求，不需要额外做格式转换。

2. 修正MessageBird接口调用的recipients参数，去掉错误的单引号字符串写法，直接传入状态中存储的手机号值，同时增加非空校验避免空值提交：

// 替换原有发送按钮的onClick逻辑
onClick={async () => {
  if (!phoneNumber) {
    console.log("请先输入有效手机号");
    return;
  }
  console.log("提交发送的手机号：", phoneNumber);
  messagebird.messages.create({
    originator : '67528923',
    recipients : phoneNumber, // 直接传状态里的手机号字符串即可
    body : 'testing this function. '
  },
  function (err, response) {
    if (err) {
      console.log("ERROR:");
      console.log(err);
    } else {
      console.log("SUCCESS:");
      console.log(response);
    }
  });
}}

硬编码手机号时可以正常发送，是因为你直接传入了符合格式要求的静态字符串，不存在变量解析错误、值嵌套错误的问题。修复后接口就能拿到真实有效的手机号，不会再触发收件人无效的报错。

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