React组件不更新：调用TheDogAPI获取数据无法渲染结果

问题根源 #

1. 全局变量无法触发组件重渲染
   你用全局let data = []存储接口返回的数据，但React组件不会监听全局变量的变化——哪怕data内容更新了，ApiResults组件也不会自动重新渲染。

2. 错误调用组件函数
   在changeHandler里直接调用ApiResults()只是执行了这个函数，返回一段JSX，但这并不会让页面上的ApiResults组件更新，也不会把这段JSX插入到DOM中。

3. 组件间状态隔离
   ApiSearch和ApiResults是兄弟组件，没有共享状态的机制，各自的状态（或全局变量）无法互相触发更新。

修复后的完整代码 #

import { useState } from 'react';
import { Container, Row, Col, Form, Button, Card } from 'react-bootstrap';

function App() {
  // 将数据状态提升到父组件，实现兄弟组件共享
  const [breedData, setBreedData] = useState([]);

  // 定义数据获取方法，传给子组件调用
  const fetchBreedData = async (searchQuery) => {
    const response = await fetch(`https://api.thedogapi.com/v1/breeds/search?q=${searchQuery}`, {
      mode: 'cors',
      headers: {
        'x-api-key': 'XXXXXXXXXXXXXXXXXXXX' // 替换为你的API密钥
      },
    });
    // 直接用response.json()解析JSON，省去手动转文本再解析的步骤
    const data = await response.json();
    setBreedData(data);
  };

  return (
    <Container>
      <Row>
        <Col>
          <br/>
          {/* 把数据获取方法传给ApiSearch组件 */}
          <ApiSearch onSearch={fetchBreedData} />
        </Col>
      </Row>
      <Row>
        {/* 把数据传给ApiResults组件渲染 */}
        <ApiResults data={breedData} />
      </Row>
    </Container>
  );
}

function ApiSearch({ onSearch }) {
  const changeHandler = async (e) => {
    const query = e.target.value.trim();
    // 调用父组件传来的方法更新数据
    await onSearch(query);
  };

  return (
    <Form onSubmit={(e) => e.preventDefault()}>
      <Form.Group className="mb-3" controlId="fromAPISearch">
        <Form.Label>Search for a Breed</Form.Label>
        <Form.Control
          type="text"
          placeholder="Some breed.."
          onChange={changeHandler}
        />
      </Form.Group>
      <Button variant="primary" type="submit">
        Save
      </Button>
      <Button variant="danger" type="reset">
        Reset
      </Button>
      <Button variant="warning" type="reset">
        Delete All Entries
      </Button>
    </Form>
  );
}

function ApiResults({ data }) {
  // 直接遍历传入的数据生成卡片，简化渲染逻辑
  return (
    <Col>
      {data.map(d => (
        <Card key={d.id} className="mb-2">
          <Card.Body>
            {d.name}
          </Card.Body>
        </Card>
      ))}
    </Col>
  );
}

export default App;

关键修复点 #

• 状态提升：将数据状态breedData放在父组件App中，这样当状态更新时，所有依赖该状态的组件（ApiResults）都会自动重渲染。
• 组件通信：通过props传递方法和数据——ApiSearch调用父组件的fetchBreedData更新状态，ApiResults接收父组件的data进行渲染。
• 简化数据处理：使用response.json()直接解析接口返回的JSON数据，避免手动转换文本再解析的冗余步骤。
• 优化渲染逻辑：ApiResults直接遍历传入的数据生成卡片，不需要额外创建中间数组再二次遍历。

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