React Native选择联系人后输入框无法自动填充问题求助

嘿，我明白你现在遇到的困扰了——选择联系人后输入框没法立刻更新，只有重新导航返回组件时才会填充。这是因为你用global变量存储手机号，但React组件不会自动监听全局变量的变化，而且withState的初始值只会在组件挂载时执行一次，后续global.phoneDemo改变了，组件的本地state也不会同步更新。

咱们换个符合Redux规范的方式来解决，把手机号存入Redux Store，让组件能响应式地获取更新：

步骤1：修改Redux Action和Reducer，将手机号存入Store #

首先，咱们需要把异步获取联系人的逻辑改成Redux异步Action（假设你的项目已经使用redux-thunk中间件，如果没装，先执行npm install redux-thunk安装）。

定义Action Type #

在你的action文件中添加一个新的action类型：

const SET_CONTACT_PHONE = 'SET_CONTACT_PHONE';

更新chooseContact Action #

把原来的chooseContact改成带dispatch的异步Action，获取到手机号后触发更新Store的动作：

export function chooseContact() {
  return (dispatch) => {
    ContactsWrapper.getContact().then((contact) => {
      const phone = contact['phone'];
      // 不再依赖global变量，而是通过dispatch更新Store
      dispatch({ type: SET_CONTACT_PHONE, payload: phone });
    });
  };
}

在Reducer中处理该Action #

找到对应的Reducer，添加处理SET_CONTACT_PHONE的逻辑，将手机号存入Store：

// 假设你的初始State包含contactPhone字段
const initialState = {
  // 其他已有字段...
  contactPhone: '',
};

function yourReducer(state = initialState, action) {
  switch (action.type) {
    case SET_CONTACT_PHONE:
      return {
        ...state,
        contactPhone: action.payload,
      };
    // 其他已有的case逻辑...
    default:
      return state;
  }
}

步骤2：让Merchant组件获取Store中的手机号 #

修改merchantProps选择器，将Store中的contactPhone映射到组件props：

export const merchantProps = (state) => ({
  merchant: state.merchant,
  contactPhone: state.contactPhone, // 新增这行，从Store中获取手机号
});

步骤3：同步Store变化到组件本地State #

现在组件能拿到Store里的手机号了，咱们需要在contactPhone变化时更新组件的本地state，让输入框立刻响应。使用recompose的lifecycle来监听props变化：

import { lifecycle } from 'recompose'; // 记得导入lifecycle

export default compose(
  connect(merchantProps, { pay, chooseContact }),
  // 初始化本地state时从props读取contactPhone
  withState('value', 'setValue', ({ contactPhone }) => ({ client: contactPhone || '' })),
  // 监听contactPhone的props变化，同步更新本地state
  lifecycle({
    componentDidUpdate(prevProps) {
      if (prevProps.contactPhone !== this.props.contactPhone) {
        this.props.setValue({ ...this.props.value, client: this.props.contactPhone });
      }
    },
  }),
  withHandlers({
    onClientChange: props => client => props.setValue({ ...props.value, client }),
    onSubmit: props => () => props.pay(
      props.merchant.operator ? clean(props.value.client) : trim(props.value.client)
    ),
  })
)(Merchant);

为什么这样能解决问题？ #

• 手机号现在存储在Redux Store中，属于响应式数据，当chooseContact获取到联系人后，会通过dispatch更新Store，组件通过connect能实时拿到最新的contactPhone。
• componentDidUpdate会监听contactPhone的props变化，一旦变化就更新组件的本地state，而输入框的value绑定的是本地state的client，所以会立刻显示新的手机号。
• 去掉了不可靠的global变量，完全遵循Redux的数据流规范，后续代码维护也更清晰。

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