时间戳

首页 > 解决方案 > 在 React 组件之间共享数据

javascript - 在 React 组件之间共享数据

问题描述

我在 React 中有一个搜索表单，它执行 API 调用并使用 useState() React 挂钩将名为名称服务器的数据保存在状态中。

我正在尝试确定如何将这些数据传递给另一个组件，以便可以将数据用于在页面上的其他位置呈现。

目前，我只是在搜索表单下方显示的返回块中输出数据。

import React, { useState } from "react";
import { Spinner, Form, Button, Container, Col } from "react-bootstrap";
import { FaSearch } from "react-icons/fa";

const SearchForm: React.FC = () => {
  const [domain, setDomain] = useState("");
  const [loading, setLoading] = useState(false);
  const [nameservers, setNameservers] = useState([]);
  const [submitted, setSubmitted] = useState(false);

  const formText = "Search for a domains";

  const handleChange = (event: any) => {
    setDomain(event.target.value);
  };

  const handleSubmit = (event: any) => {
    event.preventDefault();
    setLoading(true);
    setSubmitted(true);
    console.log(domain);

    fetch(`https://dns.google.com/resolve?name=${domain}&type=NS`)
      .then(results => results.json())
      .then(data => {
        setLoading(false);
        if (data && data.Answer) {
          data.Answer.sort((a: any, b: any) => a.data.localeCompare(b.data));
          setNameservers(data.Answer);
        }
      });
  };

  return (
    <>
      <Form onSubmit={handleSubmit}>
        <Form.Row>
          <Col />
          <Col>
            <Form.Control
              type="text"
              placeholder={formText}
              value={domain}
              onChange={handleChange}
              autoFocus
              required
            />
          </Col>
          <Col>
            <Button variant="primary" type="submit">
              <FaSearch /> Search
            </Button>
          </Col>
        </Form.Row>
      </Form>
      <hr />
      {submitted &&
        nameservers.map((server: any, index: number) => (
          <li key={index}>{server.data}</li>
        ))}

      {submitted && nameservers.length === 0 && <small>Error</small>}

      {loading && (
        <Container className="text-center">
          <Spinner animation="grow" size="sm" />
          <Spinner animation="grow" size="sm" />
          <Spinner animation="grow" size="sm" />
        </Container>
      )}
    </>
  );
};

export default SearchForm;

标签： javascriptreactjsjsx

解决方案

有多种方法可以在组件之间共享数据。您可以使用以下选项之一：

  • 如果要向其传递数据的组件是组件的子SearchForm组件，则可以将其作为prop.

  • 如果您通过 redux 管理状态，则可以将组件连接到 redux 存储并从组件中的 redux 存储中获取所需的数据。

  • 您还可以使用 ReactContext API在可能具有或不具有父子关系的组件之间共享公共数据。

  • 如果需要组件数据的SearchForm组件是组件的父组件SearchForm，则可以将回调函数SearchForm作为a传递给组件prop，当组件中有数据时SearchForm，调用回调函数，以a接收prop，并将数据传递为该回调函数的参数。

推荐阅读