0

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

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道具：

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)
};

使用此代码增强了组件，您可以看到errorTextprop 也来自 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
    }),
)

当用户单击按钮并且网络请求失败时，我从减速器收到错误，然后将其映射到组件作为errorText道具。但是当用户再次编辑手机时，应该会出现“请输入有效号码”错误，但来自 redux 的道具仍然存在，我changePhoneInput没有更新道具。如何避免这种情况？

我试图在 compose 中更改函数的位置，但没有帮助。我基本上需要的是用函数覆盖errorText组件中的 prop 。changePhoneInput当然我可以使用另一个变量名，但我认为应该有另一种方法来解决这个问题。

4

1 回答 1

0

您可以覆盖存储状态connect

const enhance = compose(
    withState('errorText', 'setErrorText', ''),
    connect((state, nextOwnProps) => {
        state = state.get('settings')
        return {
            loading: state.get('loading'),

            // You can override the store state here, ex:
            errorText: nextOwnProps.errorText || state.get('error')

        }
    }, {
        submitPhoneAction
    }),
    withState('phone', 'setPhone', ''),
    withHandlers({
        changePhoneInput,
        submitPhone
    }),
)

但是，我建议您看一下withStateHandlers，它可以组合withState成withHandlers一个 HOC。

于 2018-02-25T07:55:45.733 回答