1

目前正在开发一个应用程序，其中我们有一个带有 id 和列表名称的联系人列表。单击联系人列表名称将进入一个详细页面，其中列出了所述联系人列表名称中的所有联系人。

在此页面上，设置了一个按钮以显示输入字段以添加更多联系人。然后使用突变添加这些联系人。

突变完成后，联系人列表详细信息组件无法渲染并导致 undefined 错误（对于地图操作员），但是刷新页面清楚地显示联系人已成功添加。以下是代码片段：

ManageContact 组件，通过 /contacts/manage/:id 路由访问

....

class ManageContact extends Component {
  state = {
    showAddForm: false
  };

  handleAddContactBtn = () => {
    this.setState({ showAddForm: !this.state.showAddForm });
  };

  render() {
    const { showAddForm } = this.state;

    return (
      <Query
        query={findContactList}
        variables={{ id: this.props.match.params.id }}
      >
        {({ loading, error, data:{findContactList} }) => {
          if (loading) return "loading";
          if (error) return "error";
          console.log(findContactList)
          const renderContacts = findContactList => {
            const { contacts } = findContactList;
            return contacts.map((contact, index) => {
              return (
                <Row key={contact._id}>
                  <Col s={3}>{contact.firstName}</Col>
                  <Col s={3}>{contact.lastName}</Col>
                  <Col s={3}>{contact.email}</Col>
                  <Col s={3}>
                    <Button>
                      <Icon>edit</Icon>
                    </Button>
                    <Button>
                      <Icon>delete_forever</Icon>
                    </Button>
                  </Col>
                </Row>
              );
            });
          };
          return (
            <Fragment>
              <h3>{findContactList.listName}</h3>
              <Row>
                <Button onClick={this.handleAddContactBtn} className="right">
                  <Icon>{showAddForm ? "close" : "person_add"}</Icon>
                </Button>
              </Row>
              {renderContacts(findContactList)}
              {showAddForm ? (
                <RecipientList contactListID={findContactList._id} onFinishCreateContact={() => this.handleAddContactBtn()}/>
              ) : null}
            </Fragment>
          );
        }}
      </Query>
    );
  }
}

export default ManageContact;

这是 RecipientList 组件，其中执行添加联系人的突变：

...
import {
  createContactMutation,
  findContactList,
  userContactListQuery
} from "../../../graphql";

class RecipientList extends Component {
  state = {
    firstName: "",
    lastName: "",
    email: ""
  };

  createContact = async () => {
    const {
      createContactMutation,
      contactListID,
      onFinishCreateContact
    } = this.props;
    const { firstName, lastName, email } = this.state;
    onFinishCreateContact()
    try {
      await createContactMutation({
        variables: {
          contactListID,
          firstName,
          lastName,
          email
        },
        refetchQueries: [
          { query: userContactListQuery },
          { query: findContactList, variables:{ id: contactListID }}
        ]
      });


    } catch (err) {
      console.log(err);
    }

  };

  handleInputChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  renderRecipientAddForm = () => {
    const { firstName, lastName, email } = this.state;
    return (
      <Row>
        <Col s={3}>
          <Input
            label="First Name"
            name="firstName"
            value={`${firstName}`}
            onChange={this.handleInputChange}
          />
        </Col>
        <Col s={3}>
          <Input
            label="Last Name"
            name="lastName"
            value={`${lastName}`}
            onChange={this.handleInputChange}
          />
        </Col>
        <Col s={3}>
          <Input
            label="Email"
            name="email"
            value={`${email}`}
            onChange={this.handleInputChange}
          />
        </Col>
        <Col s={3}>
          <Button onClick={this.createContact}>+</Button>
        </Col>
      </Row>
    );
  };

  render() {
    return <span>{this.renderRecipientAddForm()}</span>;
  }
}

export default graphql(createContactMutation, {
  name: "createContactMutation"
})(RecipientList);

我一直在尝试使用 refetchqueries，但它一直失败。我知道当我在突变后控制台日志时，我得到未定义的数据，这是 ManageContact 组件中的地图运算符所需要的。

关于我做错了什么的任何想法？

4

0 回答 0