React-Redux，如何更改 state？

Question

我有这样的问题：我正在制作待办事项列表，现在我想为我的任务制作 EditMode。 但是当我尝试这样做时，它返回字符串而不是数组，这就是为什么我有 3 个错误（map,some,filter = is not a function）。 所以我不知道如何更改状态（任务）并返回更改后的数组。

一些细节：我正在使用连接来获取道具。

组件代码

class Item extends React.Component {
    state = {
        statusChange: false,
        task: ''
    }

    activeStatusChange = () => {
        this.setState( {
            statusChange: true
           }
       );        
    }

    deActivateStatusChange = () => {
        this.setState( {
            statusChange: false
           }
       );      
       this.props.editTask(this.state.task)
    }

    onStatusChange = (e) => {
        this.setState({
            task: e.currentTarget.value
        })
    }


    render(){
        return (
            <div className={s.item}>
            <span onClick={this.props.editStatus} className={s.statusTask}>
                {this.props.status  ? <img src="https://img.icons8.com/doodle/48/000000/checkmark.png"/> 
                                    : <img src="https://img.icons8.com/emoji/48/000000/red-circle-emoji.png"/>}
            </span>

            { this.state.statusChange 
                ? <input onChange={this.onStatusChange} autoFocus={true} onBlur={this.deActivateStatusChange} value={this.state.task} /> 
                : <span  className={this.props.status === true ? s.task : s.taskFalse} onClick={this.activeStatusChange}> {this.props.task} </span>}

            <span onClick={this.props.deleteTask} className={s.close}><img src="https://img.icons8.com/color/48/000000/close-window.png"/></span>

        </div>
        )
    }
}

export default Item;

减速机代码

import React from 'react'
import shortid from 'shortid';

const ADD_TASK = 'ADD_TASK'
const EDIT_STATUS = 'EDIT_STATUS'
const TASK_DELETE = 'TASK_DELETE'
const REMOVE_ALL_DONE = 'REMOVE_ALL_DONE'
const REMOVE_ALL_TASKS = 'REMOVE_ALL_TASKS'
const EDIT_TASK = 'EDIT_TASK'

const initialState = {
    tasks: []
};



const mainReducer = (state = initialState, action) => {
    switch (action.type) {

        case ADD_TASK: {
            return {
                ...state,
                tasks: [{
                    id: shortid.generate(),
                    task: action.task,
                    status: false
                }, ...state.tasks]
            }
        }

        case EDIT_STATUS: {
            return {
                ...state,
                tasks: state.tasks.map(task => task.id === action.id ? {...task, status: !task.status} : task)
            }
        }

        case TASK_DELETE: {
            return {
                ...state,
                tasks: state.tasks.filter(t => t.id !== action.id)
            }
        }

        case REMOVE_ALL_DONE: {
            return {
                ...state,
                tasks: state.tasks.filter(t => !t.status)
            }
        }

        case REMOVE_ALL_TASKS: {
            return {
                ...state,
                tasks: []
            }
        }

        case EDIT_TASK: {
            return {
                ...state,
                tasks: action.task
            }
        }

    default:
        return state
    }
}


export const addTask = task => ({type: 'ADD_TASK', task});
export const editStatus = id => ({type: 'EDIT_STATUS', id})
export const deleteTask = id => ({type: 'TASK_DELETE', id})
export const removeAllDone = () => ({type:'REMOVE_ALL_DONE'})
export const removeAllTasks = () => ({type: 'REMOVE_ALL_TASKS'})
export const editTask = task => ({type: 'EDIT_TASK', task})


export default mainReducer;

Answer 1

您应该创建一个使用方法 mapDispatchToProps 的容器，以便您可以在组件中使用您的操作。

https://react-redux.js.org/using-react-redux/connect-mapdispatch

所以让我们去做吧。 只需创建一个文件作为该组件的容器，然后输入如下代码：

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import Item from 'wherever your component is';
import { addTask } from 'wherever your action is';


const mapStateToProps = ({  }) => ({
    // Here you can pass the redu state to your component
});

const mapDispatchToProps = (dispatch) => ({
  ...bindActionCreators({
      // Here you pass the action to your component
      addTask
  }, dispatch)
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(Item);

然后，当您想使用 Item 组件时，将其从容器中导入，它将在 props 中接收您从容器文件传递的操作和 state。

在您的 Item 组件中，您可以使用如下操作：

// ITem component
render() {
    return (
        <button onClick={this.props.addTask} />
    )
}

如果有任何疑问，请告诉我！