使用 select 的挂钩调用无效

Question

ProductSort()调用有问题，原因是onChange。
我得到 'invalid hook call' 但我不知道如何重写代码以跳过这个问题。
也许你有一些想法？

如果您能发送一些带有 GraphQL 和 React 应用示例的链接，我将不胜感激。

 function ShowCategories(){
    
       const { loading, error, data } = useQuery( gql`
        query{
             categories{ name }
           }
        `);
    
        if (error) return `Error! ${error}`;
    
        if(loading){
          return(<option>Loading...</option>);
        } else{
          return(  data.categories.map( (category, index) => {
            return(<option key={index} value={index}> {category.name} </option>)}) );
        }
    
       }
    
    function ProductSort() {
    
        return(
          <form id="plpChooseCategory">
            <div className="field">
              <select onChange={ (event) => ShowCategories({name: event.target.value})}>
                {ShowCategories()}
              </select>
            </div>
          </form>
        )

Answer 1

React hooks 只能从 React 函数组件或自定义 React hooks 的主体调用。如果像调用常规函数一样调用 ShowCategories 代码段中的代码，这不是 React 组件的使用方式。

将 useQuery 逻辑移动到 ProductSort 并将数据呈现到选项中。

function ProductSort() {
  const { loading, error, data } = useQuery(gql`
    query{
      categories{ name }
    }
  `);

  const onChange = e => {
    const { value } = e.target;
    // do something with selected value
  };

  if (error) return `Error! ${error}`;

  return (
    <form id="plpChooseCategory">
      <div className="field">
        <select onChange={onChange}>
          {loading
            ? <option disabled value="">Loading...</option>
            : data.categories.map((category, index) => (
              <option key={index} value={index}>
                {category.name}
              </option>
            ))
          }
        </select>
      </div>
    </form>
  );
};

使用 select 的挂钩调用无效

Invalid hook call with select

reactjs

graphql

react-hooks