Question

我希望我的应用能够使用Redux显示用户在其下的标签中输入的内容。

所以这是我的容器：

addr2line -fe build/debug/lock_free_list_test 0xa053 0x9159 ...

这是我的组件：

    const mapStateToProps = state => ({
  text: state
})

const mapDispatchToProps = (dispatch) => ({
  addToList: () => { dispatch({ type: 'ADD_LIST' }) },
})

export default connect(mapStateToProps, mapDispatchToProps)(TodoList)

这是商店：

class TodoList extends Component {
  render() {
    return (
      <View>
        <TextInput
          style={{height: 40, width: 300}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.props.text}
        />
        <Button
          title="Submit"
          onPress={this.props.addToList}/>
        <View>
          <Text>{this.props.text}</Text>
        </View>
      </View>
    )
  }
}



export default TodoList;

所以我试图输入文本，将其添加到存储在商店中的列表然后显示它，但我完全不知道如何做到这一点......

Answer 1

你在这里有一些事情......

你的onChangeText听众没有做任何事情。您需要捕获输入到组件中的文本并将其发送给您的调度员。
您需要包含作为操作创建者一部分传入的新文本。
mapStateToProps负责将元素置于应用程序状态并将其映射到props以使组件可用。对于此示例，您的应用程序状态非常简单。它只是{ text: 'SOME TEXT' }。
您需要为Redux商店创建Provider。它应该在您应用的根级别工作。

以下是所有部分：

App.js （创建提供程序的应用程序控制器）

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import todoList from './actions/Reducer';
import { createStore } from 'redux';
import Root from './Root';

class App extends Component {
  store = createStore(todoList);

  render() {
    return (
        <Provider store={this.store}>
          <Root/>
        </Provider>
    )
  }
}

export default App;

<强> Root.js

import React, { Component } from 'react';
import { View, TextInput, Button, Text } from 'react-native';
import { connect } from 'react-redux';

class Root extends Component {
  render() {
    const displayText = this.props.textList.join();

    return (
        <View>
          <TextInput
              style={{height: 40, width: 300}}
              placeholder="Type here to translate!"
              onChangeText={(text) => this.props.updateField(text)}
          />
          <Button
              title="Submit"
              onPress={() => this.props.addToList(this.props.text)}/>
          <View>
            <Text>{displayText}</Text>
          </View>
        </View>
    )
  }
}

const mapStateToProps = state => ({
  text: state.textField,
  textList: state.list
});

const mapDispatchToProps = (dispatch) => ({
  updateField: (newText) => { dispatch({ type: 'FIELD_CHANGE', text: newText })},
  addToList: (text) => { dispatch({ type: 'ADD_LIST', text: text }) },
});

export default connect(mapStateToProps, mapDispatchToProps)(Root)

Reducer.js （控制你的状态对象）

const INITIAL_STATE = {
  textField: '',
  list: []
};

export default todoList = (state = INITIAL_STATE, action = {}) => {
  switch (action.type) {
    case 'FIELD_CHANGE':
      return {
        ...state,
        textField: action.text
      };
    case 'ADD_LIST':
      return {
        textField: '',
        list: [...state.list, action.text]
      };
    default:
      return state;
  }
};

EDIT-Changed示例添加到列表中。注意：这不是在RN中显示项目列表的正确方法。我只是将字符串放入Text字段中作为示例。使用FlatList正确显示项目列表。

我想显示由用户/ React Native + Redux创建的列表

1 个答案: