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

如果您可以共享通过响应返回的数据并比较其结构以确保其符合您的需求，则可能是个好主意

Answer 2

问题与我的CSS有关，无法正确导入

子组件无法正确呈现

2 个答案: