Reactjs 在《阿波罗》中，创作的备选方案是什么？

我一直试图同时使用多个graphql（）增强器，但compose似乎不起作用。我试过从不同的库中导入不同的内容，但仍然没有。请问有谁知道有什么办法吗？数据没有从graphl（）传递到我的组件道具，因此我收到一个错误，读取无法破坏“数据”的“加载”属性，因为它未定义。

这是我的部件

import React,{useState} from 'react'

// import {compose} from 'redux'
import { flowRight as compose } from 'lodash'
import { graphql} from 'react-apollo'
import {getAuthorsQuery, addBookMutation} from './queries/query'




const AddBook = (props) => {

  const [formData, setFormData] = useState({
    name:'',
    genre:'',
    authorId:''
  })

  const {name, genre, authorId} = formData
  const onChange = e => setFormData({ ...formData, [e.target.name]: e.target.value})

 const displayAuthors = () => {
   let data = props.data
   const {loading} = data

   if(loading){
   return (<option>Loading Authors</option>) 
   } else{
      return data.authors.map(author => {
       return (<option key={author.id} value={author.id}>{author.name}</option>)
      })
   }
  }

  const submitForm = e => {
   e.preventDefault();
   console.log(formData);

  }

  return (
    <form id="add-book" onSubmit={e => submitForm(e)}>
      <div className="field">
        <label>Book name:</label>
        <input 
        type="text"
        onChange={e => onChange(e)} 
        name="name"
        value={name}
         />
      </div>

      <div className="field">
        <label>Genre:</label>
        <input 
        name="genre"
        value={genre}
        type="text" 
       onChange={e => onChange(e)}
       />
      </div>

      <div className="field">
        <label>Author:</label>
        <select
        name="authorId"
        value={authorId}
        onChange={e => onChange(e)}
        >
        <option>Select Author</option>
        {displayAuthors()}
        </select>
      </div>

      <button>+</button>

    </form>
  )
}

// export default graphql(getAuthorsQuery)(AddBook)

export default compose(
  graphql(getAuthorsQuery, {name: "getAuthorsQuery"}),
  graphql(addBookMutation, {name:"addBookMutation"})
)(AddBook)

---

您可以使用apollo的useQuery钩子执行如下查询

import { useQuery } from '@apollo/react-hooks';

import React,{useState} from 'react'

// import {compose} from 'redux'
import { flowRight as compose } from 'lodash'
import {getAuthorsQuery, addBookMutation} from './queries/query'


const AddBook = (props) => {

  const [formData, setFormData] = useState({
    name:'',
    genre:'',
    authorId:''
  })
  const  authors = useQuery(getAuthorsQuery):
  const bookMutation = useQuery(addBookMutation);

  ... rest of code here


}

export default AddBook;

---

您为两个HOC提供了一个

名称

选项，因此数据将在这些道具名称下可用：

props.getAuthorsQuery.loading

---

这就是说，HOCs已经被弃用了——您可能应该使用更新的hooks API。

如果您试图学习新的hooks API，我会先学习，然后再阅读Apollo API，我在@HMR@MuhammedA.O中看不到弃用警告。通过几个例子，然后如果你遇到了障碍，找不到任何类似的问题，请随意抛出一个。或者打开频谱频道。谢谢。您能告诉我如何实现使用useQuery函数创建的变量吗。再次感谢。返回的值将是getAuthorsQuery和addBookMutation的值，您可以随意命名并在代码中使用它们

props.getAuthorsQuery.loading