我在一个简单的todo应用程序中有一些功能，应该查询和更新mongodb。阿波罗商店缓存已更新，如其文档所示。然后将更新后的商店作为App组件道具映射到React Material UI列表项和复选框。当用户单击列表项时，该项仅在刷新页面后才会呈现。商店更新后或商店未正确更新后，React似乎没有更新ui。有人知道是什么原因造成的吗？
class App extends Component {
updateTodo = async todo => {
//Update todo from database and frontend ui
await this.props.updateTodo({
variables: {
id: todo.id,
//input opposite of current todo's complete value:
complete: !todo.complete
},
//update the apollo cache with the new query information:
update: store => {
// Read the data from our cache for this query.
const data = store.readQuery({ query: TodosQuery });
//console.log(store);
// Add our comment from the mutation to the end.
//map through each todo and if current id matches todo id to update return current
data.todos = data.todos.map(
inputVal =>
//if current id matches todo id from the query
inputVal.id === todo.id
? {
//keep all current todo's properties
...todo,
//except change complete to its opposite:
complete: !todo.complete
}
//else return current non-updated todo
: inputVal
)
// Write our data back to the cache.
store.writeQuery({ query: TodosQuery, data })
//console.log(store);
}
});
}
渲染部分：
render() {
//Save the mongodb todos and loading status to props
const {
data: {loading, todos}
} = this.props;
if (loading) {
return null;
}
return (
<div style = {{display: "flex"}}>
<div style = {{margin: "auto", width: 400}}>
{/* Paper component is a material ui background */}
<Paper elevation={1}>
<Form submit={this.createTodo}/>
<List>
{/* each todo from the database is mapped to a list item React component */}
{todos.map(todo =>
<ListItem
key={todo.id}
role={undefined}
dense
button
//call update todo function when list item is clicked
onClick={() => this.updateTodo(todo)}
>
<Checkbox
// each todo's complete status is
//set as the checked state in the checkbox component
checked={todo.complete}
//tabIndex={-1}
disableRipple
/>
{/* text from the todo is set to the ListItemText component's primary text */}
<ListItemText primary={todo.text} />
<ListItemSecondaryAction>
{/* Call remove function when iconbutton component is clicked */}
<IconButton onClick={() => this.removeTodo(todo)}>
<CloseIcon />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
)}
</List>
</Paper>
</div>
</div>
)
}
}
export default compose(
graphql(CreateTodoMutation, {name: "createTodo"}),
graphql(RemoveMutation, {name: "removeTodo"}),
graphql(UpdateMutation, {name: "updateTodo"}),
graphql(TodosQuery)
)(App);
完整的项目代码可在此处查看：https://github.com/tmstani23/todo-mern/tree/development/client/src
在此问题上的任何帮助将不胜感激。