构建简单的电话输入表单组件:
class PhoneSettingsScreen extends React.Component {
render() {
const {changePhoneInput, submitPhone, errorText, loading} = this.props
return (
<View>
<TextInput onChangeText={changePhoneInput}/>
<Text style={{color: 'red'}}>{errorText}</Text>
<Button
onPress={submitPhone}
/>
{loading && <Spinner/>}
</View>
</View>
)
}
}
当用户在字段中键入电话时,此功能会更新errorText
prop:
const changePhoneInput = props => phone => {
const {setPhone, setErrorText} = props
setPhone(phone)
let error = /[0-9]{6,9}/g.test(phone) ? '' : "Please enter valid number";
setErrorText(error)
};
使用此代码增强了组件,您可以看到errorText
prop也来自redux状态:
const enhance = compose(
withState('errorText', 'setErrorText', ''),
connect((state, nextOwnProps) => {
state = state.get('settings')
return {
loading: state.get('loading'),
errorText: state.get('error')
}
}, {
submitPhoneAction
}),
withState('phone', 'setPhone', ''),
withHandlers({
changePhoneInput,
submitPhone
}),
)
当用户点击按钮,并且网络请求失败时,从reducer我收到错误,我将其映射到组件errorText
道具。但是当用户再次编辑电话时,&#34;请输入有效号码&#34;错误应该出现,但来自redux的道具仍然存在,我的changePhoneInput
没有更新道具。怎么避免这个?
我试图改变作曲中的功能位置,但它没有帮助。我基本上需要的是用errorText
函数覆盖我的组件中的changePhoneInput
道具。当然我可以使用另一个变量名,但我认为应该有另一种方法来解决这个问题。