Question

我是本机和redux的新手。

在此文件friends.js中，我已经创建了该文件，以便当有人点击“添加朋友”按钮时该应用添加朋友。我现在也在尝试制作一种将新名称添加到名称列表的表单。形式如下：

import React from 'react';
import { StyleSheet, Text, View, Button, TextInput, KeyboardAvoidingView } from 'react-native';
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';
import {addFriend} from './FriendActions';
import {addFriendFromForm} from './FriendActions';

class Friends extends React.Component {
    constructor(){
     super();
     this.formFieldValue = "";
    }
  render() {
    return (
      <KeyboardAvoidingView behavior="padding" enabled>
        <Text>Add friends here!</Text>
        {this.props.friends.possible.map((friend,index) => (
                <Button 
                    title={`Add ${friend}`}
                    key={friend}
                    onPress = { () =>
                        this.props.addFriend(index)
                    }
                / >
            )
        )}
        <Button 
            title="Back to Home" 
            onPress={() => this.props.navigation.navigate('Home')} 
        />
        <TextInput 
            style={{height: 40, width: 200}}
            placeholder="Type in a friend's name"
            onChangeText={(text) => {
                    this.formFieldValue = text; 
                    console.log(this.formFieldValue);
                }
            }
        />
        <Button
            title="Add Friend From Form"
            onPress={() => this.props.addFriendFromForm(this.formFieldValue)}
        / >

      </KeyboardAvoidingView>
    );
  }
}

const mapStateToProps = (state) => {
  const  friends  = state;
  console.log("friends", JSON.stringify(friends));
  return  friends 
};

const mapDispatchToProps = dispatch => (
    bindActionCreators({
        addFriend,
        addFriendFromForm
    }, dispatch)
);

export default connect(mapStateToProps, mapDispatchToProps)(Friends);

这是表单触发的动作：

export const addFriend = friendIndex => ({
    type: 'ADD_FRIEND',
    payload: friendIndex
})

export const addFriendFromForm = friendNameFromForm => ({
    type: 'ADD_FRIEND',
    payload: friendNameFromForm
})

这是调用动作的减速器。（我在哪里思考问题）：

import {combineReducers} from 'redux';
const INITIAL_STATE = {
    current: [],
    possible: [
        'Allie',
        'Gator',
        'Lizzie',
        'Reptar'
    ]
};
const friendReducer = (state = INITIAL_STATE, action) => {
    switch(action.type){
        case 'ADD_FRIEND':
            const {
                current,
                possible
            } = state;
            const addedFriend = possible.splice(action.payload, 1);
            current.push(addedFriend);
            const newState = {current, possible};
            return newState;
        case 'ADD_FRIEND_FROM_FORM':
            const {
                currents,
                possibles
            } = state;
            currents.push(action.payload);
            const newState2 = {current: currents, possible: possibles};
            return newState2;
        default:
            return state;
    }
};

export default combineReducers({
    friends: friendReducer
});

正如我提到的，按按钮可以从初始状态自动添加名称。但是，在通过表单添加名称时，表单似乎只会将allie添加到可能的朋友，而不是在表单中键入名称，因为console.log中的friends.js显示如下： friends {"friends":{"current":[["Allie"]],"possible":["Gator","Lizzie","Reptar"]}}。

如何使表格生效？
我在this.formFieldValue中使用了friends.js，因为每当表单字段文本发生更改时（实际上仅在按下“提交”按钮时才需要更改状态）更改状态似乎过大。这是将表单数据发送到操作的正确方法吗？

虽然看起来好像我在问2个问题，但我敢肯定这是一个答案，可以使他们两个都感到高兴。谢谢！

Answer 1

问题可能是您直接使用push来改变状态，请尝试使用数组扩展：

const friendReducer = (state = INITIAL_STATE, action) => {
    switch(action.type){
        case 'ADD_FRIEND':
            const {
                current,
                possible
            } = state;
            const addedFriend = possible.splice(action.payload, 1);
            current.push(addedFriend);
            const newState = {current, possible};
            return newState;
        case 'ADD_FRIEND_FROM_FORM':
            return {...state, current: [...state.current, action.payload]}
        default:
            return state;
    }
};

与属性名称保持一致也是一个好主意，似乎您可以交替使用current和currents。

React-Native Redux在第一个reducer中工作，但在第二个中不工作

1 个答案: