Question

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

我是否给它flex的样式：1和屏幕宽度，两者都没有区别。我不确定问题出在我提供的数据中还是renderItem是问题。我直觉这是redux将数组传递给FlatList的方式的问题，但不是肯定的。

我的主要待办事项组件的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应该为空白，没有任何错误。

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

Flatlist不呈现Redux数组数据

1 个答案: