Question

我知道有很多类似的问题，但我无法找到正确的答案来筛选其他问题。问题似乎是{loopToDo}没有直接引用商店的道具。如何设置我的代码，以便在商店更改时更新代码，就像我想要的那样？

@connect((germzFirstStore) => {
    return {
        taskList: germzFirstStore.tasks
    }
})

class TaskBoard extends React.Component {

render() {

    function toDoStatus(value) {
        return value.taskstatus === "toDo";
    }

    var toDoTasks = this.props.taskList.tasks.filter(toDoStatus);
    var loopToDo = toDoTasks.map((tasksEntered) => {
        return (
            <div id={tasksEntered.idtasks} className="taskBox">{tasksEntered.task}</div>
        );
    });

    return(
        <div ref="toDo" id="toDo" className="container toDo">{loopToDo}</div>
    )

    }
}

减速器：

const tasksReducer = (state=tasksInitialState, action) => {
    if (action.type === "ADD") {
        state = {...state, tasks: [...state.tasks, action.newTask]}
    }
    return state; }

Answer 1

这里的问题是通过这样做

state = {...state, tasks: [...state.tasks, action.newTask]}

在返回状态之前，您实际上正在改变状态，这可能是您的组件在更新状态时不重新渲染的原因。您在减速机中可以做的是

if (action.type === "ADD") {
    return {...state, tasks: [...state.tasks, action.newTask]}
}

或

if (action.type === "ADD") {
    return Object.assign({}, state, {tasks: [...state.tasks, action.newTask]})
}

希望有所帮助：）

Answer 2

如果germzFirstStore.tasks已更新，则组件将重新渲染，它与渲染函数内部无关。我的猜测是你正在改变reducer中的状态，而不是更新它并返回状态的更新版本。

当redux存储更改时，React不会重新呈现

2 个答案: