如何结合自定义组件使用redux-form的formValueSelector并解决selector未定义问题

嗨，我之前在redux-form里做自定义组件的动态显示逻辑时也踩过类似的坑，咱们来一步步解决这个问题～

首先，你遇到的selector未定义问题，大概率是因为没有正确从redux-form的store中获取字段值，或者自定义组件没有处理好redux-form传递的props。下面是具体的解决方案：

1. 正确获取redux-form字段的值 #

要在父组件中拿到addNumberPhone字段的状态，你需要用到redux-form提供的formValueSelector，并通过react-redux的connect把值映射到组件props里：

首先导入需要的工具：

import { formValueSelector, reduxForm } from 'redux-form';
import { connect } from 'react-redux';

然后创建字段选择器（记得把'myForm'替换成你实际的表单名称）：

// 创建针对目标表单的选择器
const formSelector = formValueSelector('myForm');

接着把字段值映射到组件props：

const mapStateToProps = (state) => ({
  // 获取addNumberPhone字段的当前值
  addNumberPhoneValue: formSelector(state, 'addNumberPhone')
});

最后把你的表单组件和redux连接起来（别忘用reduxForm包装）：

// 假设你的组件叫PhoneForm，替换成你的组件名
export default connect(mapStateToProps)(reduxForm({ form: 'myForm' })(PhoneForm));

2. 修复自定义按钮组件的逻辑 #

你的自定义按钮组件需要接收redux-form传递的input对象（包含value和onChange等方法），这样点击按钮时才能正确更新表单状态：

const renderButtonAddNumberPhone = ({ input, label }) => {
  return (
    <button
      type="button"
      // 点击时切换布尔值，更新redux-form的字段状态
      onClick={() => input.onChange(!input.value)}
    >
      {label}
    </button>
  );
};

3. 父组件中正常使用动态显示逻辑 #

现在你就可以在父组件里放心使用addNumberPhoneValue来控制输入框的显示了：

<Field 
  name="addNumberPhone" 
  id="addNumberPhone" 
  component={renderButtonAddNumberPhone} 
  label='Add new label' 
/> 

{addNumberPhoneValue && (
  <div>
    {/* 这里放你要显示的新输入框，比如用redux-form的Field组件 */}
    <Field 
      name="newPhoneNumber" 
      component="input" 
      type="text" 
      placeholder="Enter new phone number" 
    />
  </div>
)}

关键注意点 #

• 确保reduxForm的form名称和formValueSelector里的名称完全一致，不然会拿不到正确的值。
• 自定义组件必须处理input props，因为redux-form是通过这个对象来同步表单状态的，忽略它的话字段值永远不会更新。
• 如果你的自定义按钮需要更复杂的状态（比如非布尔值），只需要调整onChange传递的值即可，redux-form会自动把它存在store里。

这样调整后，应该就能解决selector未定义的问题，实现点击按钮显示输入框的功能啦～

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