在React Js中使用Hooks将新项目推入数组并创建新实例

Question

使用钩子再次刺入，我能够在单击时复制我的组件，但是在创建新项目时它始终为我提供相同的状态。不知道我在这一点上缺少什么。

function App() {
  return (
    <Info>
      <Input />
    </Info>
  );
}

function Input() {
  const [message, setMessage] = useState("");
  const [result, setResult] = useState("");
  const [placeholder, setPlaceholder] = useState("");
  const [submit, setSubmit] = useState(true);
  const textAreaRef = useRef(null);
  const [btnText, setBtnText] = useState("Submit");
  const [searches, setSearches] = useState([]);
  const [query] = useState("");

  const copyToClipboard = e => {
    textAreaRef.current.focus();
    textAreaRef.current.select();
    document.execCommand("copy");
    setBtnText("Copied");
    timerid();
  };

  const timerid = () => {
    setTimeout(() => {
      setBtnText("copy");
    }, 1000);
  };

  const fetchData = message => {
    axios
      .get(
        `${"https://cors-anywhere.herokuapp.com/"}http://api.shorte.st/s/xxxx/${message}`
      )
      .then(res => {
        console.log(res.data.shortenedUrl);
        setResult(res.data.shortenedUrl);
        setMessage(res.data.shortenedUrl);
        setPlaceholder(message);
        setSubmit(true);
        setBtnText("copy");
        handleClick();
      })
      .catch(err => {
        console.log(err);
      });
  };

  const handleChange = e => {
    setMessage(e.target.value);
    setSubmit(false);
    setBtnText("Submit");
  };

  const handleClick = () => {
    setSearches(searches => searches.concat(query));
  };

  return (
    <Fragment>
      <div className="input-fields">
        <input
          type="text"
          ref={textAreaRef}
          placeholder="Enter some text!"
          value={message}
          className="input-text"
          onChange={handleChange}
        />
        <input
          type="button"
          value={btnText}
          className="button2 b-green rot-135"
          onClick={e => (!submit ? fetchData(message) : copyToClipboard(e))}
        />
      </div>
      {searches.map((item, i) => (
        <div className="input-message" key={i}>
          <p>{placeholder} </p>
          <p>
            <a href={result} target="_blank" rel="noopener noreferrer">
              {result}
            </a>
          </p>
          <input
            type="button"
            value={btnText}
            className="button2 b-green rot-135"
            onClick={e =>
              btnText === "Submit" ? fetchData(message) : copyToClipboard(e)
            }
          />
        </div>
      ))}
    </Fragment>
  );
}

function Info({ children }) {
  return (
    <div className="input">
      <h1 style={{ color: "white" }}>Make Tiny URL</h1>
      <p>Paste your URL to create a shortened link then copy your link</p>
      {children}
    </div>
  );
}

下面的沙箱。将URL复制并粘贴到输入字段中，然后将为您缩小URL。复制一个新的URL，它将再次缩小并重复，但是状态已被覆盖。

沙盒：https://codesandbox.io/s/adfly-apicopy-input-hooks-3kzct

Answer 1

您正在遍历搜索，但没有使用这些值。相反，您直接使用结果和占位符，这意味着所有值将相同。结果和占位符是字符串，每次搜索都将覆盖它们。这意味着，所有先前的数据都被最后一个数据覆盖。

您用于保存搜索的方法，结果和占位符也应遵循相同的方法。

已在沙箱中为您解决了同样的问题（仅针对结果变量）：https://codesandbox.io/s/adfly-apicopy-input-hooks-pec87

希望有帮助。