Question

我正在使用redux制作待办事项列表应用程序。我可以用redux添加待办事项，但是我的切换待办事项和删除待办事项有问题。

切换待办事项动作由redux存储调用（我看到它发生在调试器中），但是，它不会将prop更新为与complete相反，并且我不确定为什么。

我尝试使用语法并为其他人的redux待办事项列表建模了几个小时，但未能解决此问题。

我的toggleTodo和removeTodo动作：

export const toggleTodo = (item) => {
  return {
    type: TOGGLE_TODO,
    id: item.id
  };
};

export const removeTodo = (item) => {
  return {
    type: REMOVE_TODO,
    id: item.id
  };
};

我的TodoReducer：//这是我怀疑问题所在的地方

const initialState = {
  todos: []
};

const todos = (state = initialState, action) => {
  switch (action.type) {
    case TOGGLE_TODO:
      if (state.id !== action.id) {
        return state;
      }
      return {
        ...state, completed: !state.todos.completed
      };
    case REMOVE_TODO: {
      const newState = [...state];
      newState.splice(action.id, 1);
      return { ...newState };
    }

我在其中调用操作的主要单位列表：

render() {
    return (
      <View style={{ height: HEIGHT }}>
          <FlatList
            data={this.props.todos}
            extraData={this.state}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({ item }) => {
              return (
                <TodoItem
                  todoItem={item}
                  pressToToggle={() => this.props.toggleTodo(item)}
                  deleteTodo={() => this.props.removeTodo(item)}
                />
              );
            }}
          />
      </View>
    );
  }
}

export default connect(mapStateToProps, { addTodo, toggleTodo, removeTodo })(MainTodo); 
// I call the actions I am using here and don't use mapDispatchToProps

还有我传递道具的TodoItem组件：

class TodoItem extends Component {
  render() {
    const todoItem = this.props.todoItem;
    return (
      <View>
        <TouchableOpacity
          style={styles.todoItem}
          onPress={this.props.pressToToggle}
        >
          <Text
            style={{
              color: todoItem.completed ? '#aaaaaa' : '#f5f5f5',
              textDecorationLine: todoItem.completed ? 'line-through' : 'none',
              fontSize: 16 }}
          >
            {todoItem.text}
          </Text>
            <Button
              title='Remove'
              color='#ff5330'
              onPress={this.props.deleteTodo}
            />
        </TouchableOpacity>
      </View>
    );
  }
}

当我按下切换待办事项而不是更改道具时，并且文本上的一行都没有发生。

当我尝试删除待办事项时，出现此错误-“无效的尝试传播不可迭代的实例。”

Answer 1

当您将函数传递给组件时，请尝试传递其引用，而不是

<TodoItem
    todoItem={item}
    pressToToggle={() => this.props.toggleTodo(item)}
    deleteTodo={() => this.props.removeTodo(item)}
/>

尝试

<TodoItem
    todoItem={item}
    pressToToggle={this.props.toggleTodo.bind(this)}
    deleteTodo={this.props.removeTodo.bind(this)}
/>

，然后在您的 TodoItem 组件中调用类似的函数

class TodoItem extends Component {
  render() {
    const todoItem = this.props.todoItem;
    return (
      <View>
        <TouchableOpacity
          style={styles.todoItem}
          onPress={() => this.props.pressToToggle(todoItem)} /* this line */
        >
          <Text
            style={{
              color: todoItem.completed ? '#aaaaaa' : '#f5f5f5',
              textDecorationLine: todoItem.completed ? 'line-through' : 'none',
              fontSize: 16 }}
          >
            {todoItem.text}
          </Text>
            <Button
              title='Remove'
              color='#ff5330'
              onPress={this.props.deleteTodo}
            />
        </TouchableOpacity>
      </View>
    );
  }
}

Redux减速器不更改道具

1 个答案: