Flatlist 不渲染 redux 数组数据答案

【问题标题】：Flatlist not rendering redux array dataFlatlist 不渲染 redux 数组数据
【发布时间】：2019-11-25 15:44:58
【问题描述】：

我的 FlatList 没有显示任何错误，但没有呈现我提供的数据。 redux 数组工作正常并向其中添加项目，但 FlatList 没有将它们呈现到屏幕上。

我是否给它 flex: 1 的样式和屏幕宽度，两者都没有区别。我不确定问题是否与我提供的数据有关，或者 renderItem 是否是问题。我有一种预感，redux 将数组传递给 FlatList 的方式存在问题，但不是肯定的。

我的主要 todo 组件的 FlatList 配置：

render() {
    return (
      <View style={{ height: HEIGHT }}>
        <ScrollView>
          <AddTodo
            textChange={textInput => this.setState({ textInput })}
            addNewTodo={this.addTodo.bind(this)}
            textInput={this.state.textInput}
          />
          <FlatList
            style={{ flex: 1, width: WIDTH }}
            data={this.state.todos}
            extraData={this.props}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({ item }) => {
              console.log(item);
              return (
                <TodoItem
                  todoItem={item}
                  toggleDone={() => this.props.toggleTodo(item.id)}
                  removeTodo={() => this.props.removeTodo(item)}
                />
              );
            }}
          />
        </ScrollView>
      </View>
    );
  }
}

function mapStateToProps(state) {
  return {
    todos: state.todos
  };
}

export default connect(mapStateToProps, actions)(MainTodo);

我的 todoItem 组件：

render() {
    const todoItem = this.props.todoItem;
    console.log(todoItem);
    return (
      <View>
        <TouchableOpacity
          style={styles.todoItem}
          onPress={() => this.props.toggleDone()}
        >
          <Text
            style={{
              color: todoItem.completed ? '#aaaaaa' : '#313131',
              textDecorationLine: todoItem.completed ? 'line-through' : 'none',
              fontSize: 16 }}
          >
            {todoItem.text}
          </Text>
            <Button
              title='Remove'
              color='#ff5330'
              onPress={this.props.removeTodo}
            />
        </TouchableOpacity>
      </View>
    );
  }
}

这就是我的 todo reducer 是如何为正在传递的数组设置的：

const todos = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [...state.todos, {
          id: action.id,
          text: action.text,
          completed: false
        }] };

添加待办事项工作正常，并将内容添加到我的数组中，但 FlatList 应该是空白的地方没有任何错误。

【问题讨论】：

标签： react-native redux react-redux

【解决方案1】：

您正在尝试从状态而不是道具访问待办事项。 "mapStateToProps" 使用 this.props.todos 你应该很好。

        <FlatList
               style={{ flex: 1, width: WIDTH }}
                data={this.props.todos}
                extraData={this.props}
                keyExtractor={(item, index) => index.toString()}
                renderItem={({ item }) => {
                  console.log(item);
                  return (
                    <TodoItem
                      todoItem={item}
                      toggleDone={() => this.props.toggleTodo(item.id)}
                      removeTodo={() => this.props.removeTodo(item)}
                    />
                  );
                }}
              />

【讨论】：

这样的东西就是 Typescript 如此棒的原因。我强烈建议在不久的将来学习它，定义你的 props 结构和数据类型将防止这些容易出错。
啊，那是我的错，我打算在发送之前将其更改回道具，但是遗憾的是，这并没有解决我的问题，我只是尝试了 :(
终于想通了，我需要在我的 mapStateToProps 中调用 todos: state.TodoReducer.todos。