html - 子组件无法正确呈现

Question

在我的代码中，父组件是 Bucket.js子组件是 ListItem.js .父组件调用数据库并取回一个结构为:[{...},{...},{...}] 的对象，该对象将存储到 this.state.search 中。 .
当我渲染每个子组件时，只有第一个 <div>标签在 <ListItem>显示。之后的所有内容都不会呈现，我无法弄清楚为什么会这样。
Bucket.js

    import React, { Component, useState } from "react";
    import axios from "axios";
    import ListItem from "./ListItem";

    class Bucket extends Component {
      constructor() {
        super();
        this.state = {
          search: [],
        };
      }

      componentDidMount() {
        axios
          .get(`http://localhost:9000/viewCribb`)
          .then((response) => response)
          .then((result) => {
            this.setState({ search: result.data });
            console.log("Search State: ", this.state);
          });
      }


      render() {
        {
          console.log("Rendering!");
        }
        return (
          <>
            {this.state.search ? (
              <>
                {Object.keys(this.state.search).map((item, index) => (
                  <ListItem
                    {...this.props}
                    key={this.state.search[item].address_id}
                    listing={this.state.search[item]}
                  ></ListItem>
                ))}
              </>
            ) : (
              <></>
            )}
          </>
        );
      }
    }

    export default Bucket;

ListItem.js

    import React from "react";
    import classNames from "classnames";
    const ListItem = (...props) => {
      console.log("props", props);
      return (
        <>
          <div>{props[0].listing.streetaddress}</div>
          <div className="tiles-item reveal-from-right" data-reveal-delay="200">
            <div className="tiles-item-inner">
              <div className="testimonial-item-content">
                <p className="text-sm mb-0">{props[0].listing.streetaddress}</p>
              </div>
              <div className="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider">
                <span className="testimonial-item-name text-color-high">
                  Roman Level
                </span>
                <span className="text-color-low"> / </span>
                <span className="testimonial-item-link">
                  <div href="#0">AppName</div>
                </span>
              </div>
            </div>
          </div>
        </>
      );
    };

    export default ListItem;

Answer 1

根据:
https://www.npmjs.com/package/react-axios
https://github.com/axios/axios
这可能是错误的:

componentDidMount() {
        axios
          .get(`http://localhost:9000/viewCribb`)
          .then((response) => response)
          .then((result) => {
            this.setState({ search: result.data });
            console.log("Search State: ", this.state);
          });
      }

存在两个 .then 得到响应感觉不对。
您似乎正在遵循以下提到的模式:
https://www.digitalocean.com/community/tutorials/react-rendering-arrays-in-react
如果您可以共享通过响应返回的数据并比较其结构以查看它是否符合您的需求，这可能是一个好主意