第一次使用 React hooks 遇到了问题

Question

我几个月来第一次使用 react 并且有史以来第一次使用 hooks。到目前为止，我喜欢它，但我遇到了一个问题，现在已经阻止了我几个小时。

我有一个如下所示的组件：

import React, { useState } from "react";
import ReactModal from "react-modal";
import { useModal } from "react-modal-hook";
import styled from 'styled-components';

export function SearchImageForm(props) {

  const [query, setQuery] = useState("");
  const [images, setImages] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();

    fetch(`myurl&q=${query}`)
      .then((response) => {
        return response.json();
      })
      .then((myJson) => {
        if (myJson.totalHits > 0) {
          setImages(myJson.hits);
          showModal(images, handleClick);
        }
      });
  };

  const FormWrapper = styled.div`
    text-align: left;
  `;

  const Container = styled.div``;

  const LabelEl = styled.label``;

  const Input = styled.input``;

  const handleClick = (e) => {
    const urlField = document.querySelector('#url');
    urlField.value = e.target.src;
    urlField.select();
    document.execCommand("copy");
    alert('URL has been copied to your clipboard. You may now paste it into the URL field.')
  };

  return (
    <Container>
      <FormWrapper>
        <form onSubmit={handleSubmit}>
          <LabelEl>
            Enter Search Term
            <Input type="text" name="query" value={query} onChange={e => setQuery(e.target.value)} />
          </LabelEl>

          <input type="submit" value="Submit" />
        </form>
      </FormWrapper>
    </Container>
  );
}

export default SearchImageForm;

const ImageResult = ({content, handleClick}) => (
  <picture>
    <img src={content.previewURL} alt="" onClick={handleClick}/>
  </picture>
);


const [showModal, hideModal] = useModal(({images, handleClick}) => (<ReactModal isOpen ariaHideApp={false}>
  <p>Found {images.length} image(s). Click an image to copy its URL to your clipboard.</p>
  {images.map(image => <ImageResult key={image.id} content={image} handleClick={handleClick} />)}
  <input type="text" name="url" id="url" key="url" />
  <button onClick={hideModal}>Hide modal</button>
</ReactModal>));

当我尝试运行它时，我收到 React hooks 错误（Invalid Hook Call）。关于我在这里做错了什么有什么想法吗？

这里是codesandbox 上的代码，虽然我不确定它为什么不能运行。 https://codesandbox.io/s/blue-firefly-0sx6h

谢谢！

Answer 1

useModal 钩子需要在你的组件中被调用。

来自Invalid Hook Call Warning 文档：

钩子只能在函数组件内部调用。

所以你需要做的修改如下：

export function SearchImageForm(props) {
   const [showModal, hideModal] = useModal(({images, handleClick}) => (
      <ReactModal isOpen ariaHideApp={false}>
         <p>Found {images.length} image(s). Click an image to copy its URL to your clipboard. </p>
         {images.map(image => <ImageResult key={image.id} content={image} handleClick={handleClick} />)}
         <input type="text" name="url" id="url" key="url" />
         <button onClick={hideModal}>Hide modal</button>
      </ReactModal>
   ));

   // ... rest of your component code

   return <>{/* your render */}</>
}

希望对你有帮助！