在操作后反应不重新渲染
在操作后反应不重新渲染
提问于 2019-01-29 09:18:13
我有一个应用程序，它有一个带有汤列表的仪表板。每一道汤都有能力成为日常的汤。所以每个汤都有一个按钮，如果点击这个按钮，就会触发一个动作来更新我的MongoDB，使汤成为日常的汤。当一个汤是日常的汤时，它就有3个按钮:移除、降低、退出。如果单击这些按钮中的任何一个，它们都会触发一个操作来更新我的MongoDB，以更新那个特定的soup。我的问题是，当这些按钮中的任何一个被单击时，它都会执行操作，但不会在屏幕上重新呈现。我必须手动刷新页面才能看到它是否正常工作。
注意:我使用reduxThunk来立即分派操作(参见下面的代码)
我试过使用
Object.assign({}, state, action.payload)在我的reducer中确保避免直接改变状态。
我还尝试用以下命令重写我的reducer：
case "UPDATE_SOUP":
return {
...state,
isDaily: action.payload.isDaily,
isLow: action.payload.isLow,
isOut: action.payload.isOut
};React Soup组件：
class Soup extends Component {
render() {
const { soup } = this.props;
return (
<div>
<div key={soup.name} className="card">
<div
className={`card-header ${
soup.isDaily ? "alert alert-primary" : null
}`}
>
{soup.isDaily ? (
<span className="badge badge-primary badge-pill">Daily Soup</span>
) : (
"Soup"
)}
</div>
<div className="card-body">
<h5 className="card-title">{soup.name}</h5>
<p className="card-text">
{soup.isLow ? (
<span className="badge badge-warning badge-pill">
This soup is marked as LOW.
</span>
) : null}
{soup.isOut ? (
<span className="badge badge-dark badge-pill">
This soup is marked as OUT.
</span>
) : null}
</p>
{soup.isDaily ? (
<div>
<button
onClick={() =>
this.props.updateSoup(soup._id, {
isDaily: false,
isLow: false,
isOut: false
})
}
className="btn btn-danger "
>
Remove
</button>
<button
onClick={() =>
this.props.updateSoup(soup._id, {
isLow: true
})
}
className="btn btn-warning"
>
Getting Low
</button>
<button
onClick={() =>
this.props.updateSoup(soup._id, {
isOut: true
})
}
className="btn btn-dark"
>
Ran Out
</button>
</div>
) : (
<button
onClick={event =>
this.props.updateSoup(soup._id, {
isDaily: true
})
}
className="btn btn-primary"
>
Make Daily
</button>
)}
</div>
</div>
</div>
);
}
}
function mapStateToProps({ soupsReducer }) {
return { soupsReducer };
}
export default connect(
mapStateToProps,
actions
)(Soup);React SoupList组件(显示所有汤)：
class SoupList extends Component {
componentDidMount() {
this.props.allSoups();
}
renderSoup() {
const { soupsReducer } = this.props;
if (soupsReducer.length > 0) {
return soupsReducer.map(soup => {
if (soup.name !== "date") {
return <Soup key={soup._id} soup={soup} />;
} else {
return null;
}
});
}
}
render() {
console.log("SoupListProps=", this.props);
return <div>{this.renderSoup()}</div>;
}
}
function mapStateToProps({ soupsReducer, dateReducer }) {
return { soupsReducer, dateReducer };
}
export default connect(
mapStateToProps,
actions
)(SoupList);操作：
export const updateSoup = (id, update) => async dispatch => {
const res = await axios.put(`/api/allsoups/${id}`, update);
dispatch({ type: "UPDATE_SOUP", payload: res.data });
};减速机：
export default function(state = [], action) {
switch (action.type) {
case "FETCH_SOUPS":
return action.payload;
case "ALL_SOUPS":
return action.payload;
case "UPDATE_SOUP":
return action.payload;
default:
return state;
}
}回答 2
Stack Overflow用户
发布于 2019-01-29 09:34:56
问题是，通过执行以下操作，您将在每个操作中重写整个状态
return action.payload; 你需要做一些事情，比如
return { ...state, someStateKey: action.payload.data.someKey }其中，根据操作类型，您可以从响应中提取所需的数据，并将其设置为您的状态。
如果您能提供更多关于回答的信息，我可以用更具体的细节更新答案
Stack Overflow用户
发布于 2020-02-22 06:37:12
我的想法是围绕着你代码的这一部分...
export const updateSoup = (id, update) => async dispatch => {
const res = await axios.put(`/api/allsoups/${id}`, update);
dispatch({ type: "UPDATE_SOUP", payload: res.data });
};
export default function(state = [], action) {
// ...code...
case "UPDATE_SOUP":
return action.payload;
// ...code...
}
}试试这个：
确定souptype和对您操作的更改...
dispatch({ type: "UPDATE_SOUP", payload: res.data, souptype: id, update: update });将状态更新为您的reducer的souptype ...
export default function(state = [], action) {
case "UPDATE_SOUP":
const newstate = action.payload;
neswstate.soups[action.souptype] = action.isDaily ? true : false;
return newstate;当然，为什么这个不起作用呢？很简单，因为我在猜测你的状态是什么，以及汤在这种状态下是如何存储的。您的代码中没有构造函数或状态定义，因此，您需要调整上面的内容以匹配您的状态的定义方式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54412564
复制相关文章
相似问题
腾讯云开发者
