使用重构,如何用常规道具覆盖从状态覆盖映射道具?

时间:2018-01-27 15:26:33

标签: reactjs redux recompose

构建简单的电话输入表单组件:

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道具。当然我可以使用另一个变量名,但我认为应该有另一种方法来解决这个问题。

0 个答案:

没有答案