Question

我在一个简单的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

在此问题上的任何帮助将不胜感激。

更新Apollo-React商店后，React组件数据道具未更新

0 个答案: