平面列表不呈现 redux 数组数据

Question

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

无论我给它 flex：1 和屏幕宽度的样式，都没有区别。我不确定问题是否与我提供给它的数据有关，或者渲染项是否是问题所在。我有一种预感，这是 redux 将数组传递给 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);

我的待办事项组件：

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

这就是我的待办事项缩减器为正在传递的数组设置的方式：

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 应该在哪里是空白的，没有任何错误。

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