react中获取和更新表单数据

Question

我正在使用 React 和 Apollo 客户端从 GraphQL 服务器获取数据。
现在我在反应中编写了以下组件。

1. 列出所有项目的组件 - 工作。
2. 用于创建项目的组件 - 工作。
3. 用于更新项目的组件 - 不工作（不知道如何做到这一点）。

我有 2 个组件文件。

1. 更新Audio.js。
2. AudioForm.js。

现在。

1. 我需要从 GraphQL 服务器获取给定 audioID 的数据（将从路径参数获取）。
2. 然后将该音频设置为状态。
3. 并将音频状态传递给 AudioForm 组件。

我正在初始化带有空白字段的音频，最初处于状态。
我可以使用 Query 获取数据，但我不确定如何更新将传递给 AudioForm 并进一步填充数据的音频状态。

UpdateAudio.js

import React, { Component, Fragment } from 'react';
import { withRouter } from 'react-router-dom';
import { Mutation, Query, graphql } from 'react-apollo';
import { UpdateAudioQuery, GetAudio } from '../query';
import { Button, Grid, LinearProgress } from '@material-ui/core';
import AudioForm from '../components/AudioForm';


class UpdateAudio extends Component {
    constructor(props) {
        super(props);
        this.state = {
            site: "5d517862-0630-431c-94b1-bf34de6bfd8b",
            audio: {
            site: "5d517862-0630-431c-94b1-bf34de6bfd8b",
            title: '',
            description: '',

            }
        };
        this.updateCache = this.updateCache.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }

    updateCache = (cache, { data }) => {
        if (data.createAudio.audio.guid) {
            console.log("redirecting...")
            this.props.history.push('/audios')
        }
    }

    handleChange = event => {
        const { name, value } = event.target;

        this.setState(prevState => ({
            audio: {
            ...prevState['audio'],
            [name]: value,
            }
        }));
    };

    render() {
        return (
            <Fragment>
                <AudioForm audio={this.state.audio} handleChange={this.handleChange}  />
                <Grid container alignItems="center" justify="center">
                    <Grid item>
                        <Mutation mutation={UpdateAudioQuery} update={this.updateCache}>
                            {(Update, {loading, data, error}) => {
                            if (loading) {
                                return <Button variant="contained" size="large" color="secondary" disabled>Save</Button>
                            }
                            else if (error) {
                                return <div>{error}</div>
                            }
                            else {
                                return <Button variant="contained" size="large" color="secondary" onClick={() => Update({variables: this.state.audio})}>Update</Button>
                            }
                            }}
                        </Mutation>
                    </Grid>
                </Grid>
            </Fragment>
        )
    }
}

UpdateAudio = withRouter(UpdateAudio)

export default graphql(GetAudio,
    {
        name:'Get',
        options: ownProps => ({ variables: {site: "5d517862-0630-431c-94b1-bf34de6bfd8b", guid: ownProps.match.params.guid} })
    })(UpdateAudio);

AudioForm.js

import React, {Fragment} from 'react';
import { TextField, Grid } from '@material-ui/core';


class AudioForm extends React.Component {

  render() {
    console.log(this.props.audio.title);

    return (
      <Fragment>
      <form  noValidate autoComplete="off">
        <Grid container spacing={24} alignItems="center" justify="center">
          <Grid item md={4} xs={12}>
            <TextField
              id="audio-title"
              name="title"
              label="Title"
              margin="normal"
              variant="outlined"
              InputLabelProps={{ shrink: true }}
              fullWidth
              defaultValue={this.props.audio.title}
              onChange={this.props.handleChange}
              required
            />
          </Grid>
          <Grid item md={4} xs={12}>
            <TextField
              id="audio-description"
              name="description"
              label="Description"
              margin="normal"
              variant="outlined"
              InputLabelProps={{ shrink: true }}
              fullWidth
              defaultValue={this.props.audio.description}
              onChange={this.props.handleChange}
            />
          </Grid>
        </Grid>
      </form>
      </Fragment>
    );
  }
}


export default AudioForm;

query.js

    import gql from 'graphql-tag';


    export const GetAudio = gql`
        query Get($site: String!, $guid: String!) {
        getAudio(site: $site, guid: $guid){
            guid
            siteGuid
            title
            description
        }
    }`

    export const UpdateAudio = gql`
        mutation Update($site: String!, $guid: String!, $title: String, $description: String) {
        updateAudio(
            input:{
                guid: $guid,
                site: $site,
                title: $title,
                description: $description
            }
        ) {
            audio{
                guid
                siteGuid
                title
                status
            }
        }
    }`;

Answer 1

我收到了你的问题。 只需像下面这样查询。不要使用 render props 方法进行查询，因为你不能在那里做 setState。

以下方法的最佳位置是 getDerivedStateFromProps 函数。 在那里做这项工作。

client.query({
    query: GetAudio,
    variables: { site, guid }
  })
  .then((res) => {
    // check for response and do setState
    // example ... 
    const { site, title, description } = res;
    this.setState({ site, title, description });
  })
.catch( err => console.log(err));

还可以查看官方文档中的链接 https://www.apollographql.com/docs/react/essentials/queries.html#manual-query

如果我错了，我认为你的问题超过了 5 次，请原谅我。

保持祝福。