Reactjs React Native-使用Redux将项目添加到平面列表

我正在尝试用Redux实现一个简单的待办事项列表练习应用程序

我有一个

文本输入

、一个

按钮

和一个

平面列表

，项目作为数组存储在

存储

中，并由

减速机处理。
按下按钮时，应显示带有输入文本的项目
添加到列表中

当前，当我按下按钮时，什么都没有发生，列表似乎没有呈现，也没有添加新元素。
我怀疑onPress的处理可能有问题，但我不确定，我可能在其他地方犯了错误，我是个新手

欢迎您提供任何帮助

这是到目前为止我的代码（没有导入）：

行动

export const addItem = item =>({type: ADD_ITEM, payload: item});

减速器

const initialState = {
    items: [],
};

const itemReducer = (state = initialState, action) => {
    switch(action.type) {
        case ADD_ITEM:
            return { ...state, items: [...state.items, action.payload] };
        default: 
            return state;
    }

};

export default itemReducer;

贮藏

输入表格

const mapDispatchToProps = dispatch => {
    return {
        addItem: item => dispatch(addItem(item))
    };
};

class ItemInput extends Component {
    constructor(props) {
        super(props);
        this.state = { itemText: 'Add an item' };
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit() {
        //event.preventDefault();
        const { itemText } = this.state;
        this.props.addItem( { itemText } );
        this.setState({ itemText: "" });
    }

    render() {
        return (
            <View>
                <TextInput
                    style={{height: 40, borderColor: 'gray', borderWidth: 1}}
                    onChangeText={(itemText) => this.setState({itemText})}
                    value={this.state.itemText}
                />
                <Button
                    onPress={this.handleSubmit}
                    title="Submit"
                    color="#841584"
                />
        </View>
        );
    }
}

export default ItemInput = connect(null, mapDispatchToProps)(ItemInput);

const mapDispatchToProps=dispatch=>{
返回{
addItem:item=>dispatch（addItem（item））
};
};
类ItemInput扩展组件{
建造师（道具）{
超级（道具）；
this.state={itemText:'添加项'}；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleSubmit（）{
//event.preventDefault（）；
const{itemText}=this.state；
this.props.addItem（{itemText}）；
this.setState（{itemText:“}）；
}
render（）{
返回(
this.setState（{itemText}）}
值={this.state.itemText}
/>
);
}
}
导出默认ItemInput=connect（null，mapDispatchToProps）（ItemInput）；

名单

const-mapStateToProps=state=>{
返回{items:state.items}；
};
类ItemList扩展组件{
建造师（道具）{
超级（道具）；
此.state={
};
this.renderItem=this.renderItem.bind（this）；
this.keydextractor=this.keydextractor.bind（this）；
}
render（）{
返回(
);
}
keyExtractor=（项，索引）=>index.toString（）；
renderItem（{item，index}）{
返回(
{item.title}
)
}
}
导出默认列表=连接（MapStateTops）（ItemList）；

待办事项列表组件

class ToDoList extends Component {
    render() {
        return (
            <View>
                <ItemInput/>
                <List/>
            </View>
        );
    }
}

export default ToDoList;

类ToDoList扩展组件{
render（）{
返回(
);
}
}
将默认值导出到列表；

应用程序（根）

导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}
handleSubmit中的部分
here
this.props.addItem（{itemText}）
正在创建如下对象：
{itemText:'Some input text'}
。但是
renderItem
方法正在尝试使用
item.title
而不是
itemText
。你能修复它并报告它是否做得更好吗？这是我制作的简单代码示例。若遇到问题，请告诉我您可能必须使用组件将接收道具来重新渲染屏幕。或者您可以让ItemList扩展纯组件，而纯组件为您处理此问题。还要验证您是否在mapstatetoprops中以正确的格式获取数据，因为您的密钥可能被混淆了。@naffiq由于您的建议，我发现了问题，是元素映射的问题。：）
const mapStateToProps = state => {
    return { items: state.items };
  };

class ItemList extends Component {

    constructor(props) {
        super(props);

        this.state = {
        };

        this.renderItem = this.renderItem.bind(this);
        this.keyExtractor = this.keyExtractor.bind(this);
    }

    render() {
        return (
            <View style={{flex:1, backgroundColor: '#F5F5F5', paddingTop:20}}>
            <FlatList
                ref='listRef'
                data={this.props.items}
                renderItem={this.renderItem}
                keyExtractor={this.keyExtractor}/>
            </View>
        );
    }

    keyExtractor = (item, index) => index.toString();

    renderItem({item, index}) {
        return (
            <View style={{backgroundColor: 'white'}}>
                <Text>{item.title}</Text>
            </View>
        )
    }
}

export default List = connect(mapStateToProps)(ItemList);

class ToDoList extends Component {
    render() {
        return (
            <View>
                <ItemInput/>
                <List/>
            </View>
        );
    }
}

export default ToDoList;

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <ToDoList/>
      </Provider>
    );
  }
}