Question

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

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 个答案: