React组件间数据共享：如何传递API获取的nameservers数据

嘿，我来帮你搞定这个问题！你现在的nameservers数据只在SearchForm组件内部的状态里，要把它传到页面其他组件渲染，最直接的方式是通过组件Props传递（适合简单层级场景），或者用状态管理工具（比如Context API，适合复杂层级场景）。这里先给你介绍最容易上手的Props方案：

步骤1：改造SearchForm，通过回调传递数据 #

我们需要让SearchForm把获取到的nameservers数据通过一个回调函数传给它的父组件，而不是自己存储状态。修改后的SearchForm代码如下：

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

// 定义组件接收的props类型，包含一个回调函数
interface SearchFormProps {
  onNameserversChange: (servers: any[]) => void;
}

const SearchForm: React.FC<SearchFormProps> = ({ onNameserversChange }) => {
  const [domain, setDomain] = useState("");
  const [loading, setLoading] = useState(false);
  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);
    
    fetch(`https://dns.google.com/resolve?name=${domain}&type=NS`)
      .then(results => results.json())
      .then(data => {
        setLoading(false);
        let servers = [];
        if (data && data.Answer) {
          // 排序后得到服务器列表
          servers = data.Answer.sort((a: any, b: any) => a.data.localeCompare(b.data));
        }
        // 调用回调，把数据传给父组件
        onNameserversChange(servers);
      });
  };

  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 && loading && (
        <Container className="text-center">
          <Spinner animation="grow" size="sm" />
          <Spinner animation="grow" size="sm" />
          <Spinner animation="grow" size="sm" />
        </Container>
      )}
      {submitted && !loading && (
        <small>No nameservers found or an error occurred</small>
      )}
    </>
  );
};

export default SearchForm;

步骤2：创建父组件管理状态，并传递给目标组件 #

接下来我们需要一个父组件（比如App）来接收SearchForm传递的数据，然后把数据传给需要渲染的组件（比如NameserversList）：

import React, { useState } from "react";
import SearchForm from "./SearchForm";

// 专门用来渲染nameservers的子组件
const NameserversList: React.FC<{ servers: any[] }> = ({ servers }) => {
  if (servers.length === 0) return null;
  
  return (
    <div>
      <h3>Nameservers Results</h3>
      <ul>
        {servers.map((server, index) => (
          <li key={index}>{server.data}</li>
        ))}
      </ul>
    </div>
  );
};

const App: React.FC = () => {
  // 父组件管理nameservers状态
  const [nameservers, setNameservers] = useState([]);

  return (
    <div className="container mt-4">
      {/* 把回调函数传给SearchForm，用来接收数据 */}
      <SearchForm onNameserversChange={setNameservers} />
      
      {/* 在页面任意位置渲染NameserversList，传递数据 */}
      <div className="mt-5">
        <NameserversList servers={nameservers} />
      </div>
    </div>
  );
};

export default App;

核心思路解释 #

• 状态提升：我们把nameservers的状态从SearchForm移到了父组件App里，这样父组件可以控制数据的流向，把数据传递给任何需要的子组件。
• 回调传递：SearchForm通过onNameserversChange这个props回调，把API获取到的数据传给父组件的setNameservers，更新父组件的状态。
• Props传递：父组件把nameservers作为props传给NameserversList组件，这样就能在页面的其他位置展示数据了。

如果你的组件层级很深（比如嵌套了好几层），用props传递会很繁琐，这时候可以考虑用React的Context API来全局管理状态，不过对于你的场景，上面的方案已经完全够用啦。

内容的提问来源于stack exchange，提问作者steelcityamir