當還原店更改

時，React無法重新渲染我知道有很多類似的問題，但我無法找到正確的答案篩選其他人。問題似乎是{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; }

來源

2016-11-23 germz

僅有雖然即使我懷疑它做任何事情。 do：return {... state，} //等等，而不是state = {... state，} //等 – kjonsson

是的，結果相同。它是如此奇怪，因爲我有這個工作較早的代碼，功能上看起來完全一樣 – germz

你可能修改[this]（http://jsfiddle.net/guillaumemaka/jwm6k66c/）小提琴並重現你的問題？需要進行一些調查才能找出這個問題 –

如果germzFirstStore.tasks已經更新，則該組件將重新渲染它無關什麼是渲染函數內。我的猜測是你正在改變reducer中的狀態，而不是更新它並返回狀態的更新版本。

來源

2016-11-23 00:35:20 kjonsson

減速器添加到帖子 – germz

的這裏的問題是，通過這樣做

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

希望它能幫助:)

來源

2016-11-23 05:25:59

當還原店更改

回答

相關問題