Question

我有一个包含4个组件的简单应用程序-除一个组件外，大多数组件都可以正常工作。

4个组成部分

SearchContainer.js –具有搜索按钮和文本框-句柄提交，将根据搜索词提取数据，然后呈现项目组件。效果很好

Item.js –显示每个搜索词的项目列表，并提供“产品详细信息”链接以获取特定项目的详细信息–效果很好

ProductDetail.js –呈现商品的规格–并比较商品的链接–正常工作–比较卡是设置为呈现比较卡组件的反应路由器，它将获得不同的商人价格

CompareCard.js –这是我遇到的问题 a）获取/设置状态失败–未填充state.product_compare –如果将整个获取代码移至产品详细信息组件，则相同的api正在填充数据，这很奇怪。 b）即使我在comparecard组件的渲染中有一个伪文本，也没有渲染任何东西-我在渲染器中放置了console.log，我可以看到消息-但是它没有渲染任何东西。我还可以看到该道具已被更正传递给比较卡组件，因为我进行了console.logedd。 c）路由器调用方式是否有问题？为什么相同的api可以在其他组件中工作，但不能在另一个组件中工作？为什么什么都没渲染？

奇怪的是，如果我将整个提取代码移至产品详细信息组件，则相同的api会填充数据。

下面是产品详细信息和Comparecard组件的实际代码

ProductDetail.js（通过React Route呈现CompareCard）

import React from "react";
//import { Button} from 'reactstrap';
import { Link, Route, Router, HashRouter } from "react-router-dom";
import CompareCard from "./CompareCard";

const priceYugeAPI_KEY = "priceYugeAPI_KEY";
class ProductDetail extends React.Component {
  state = {
    product_details: []
  };
  componentDidMount() {
    console.log("In Product Detail", this.state.product_details);
    fetch(
      "https://price-api.datayuge.com/api/v1/compare/specs?" +
        `api_key=${priceYugeAPI_KEY}&id=${this.props.product_id}`
    )
      .then(response => response.json())
      // console.log(response.json())
      .then(jsonResp =>
        this.setState({ product_details: jsonResp.data.main_specs })
      );
  }

  render() {
    console.log("product_detail", this.state.product_details);

    return (
      <div>
        <table>
          <HashRouter>
            <p>
              <Link
                to={`/compare/${this.props.product_id}`}
                component={CompareCard}
              >
                {" "}
                Compare Card{" "}
              </Link>
            </p>
            <Route
              exact
              path={`/compare/${this.props.product_id}`}
              render={() => <CompareCard product_id={this.props.product_id} />}
            />
            <div>
              <th>Main Specs </th>
            </div>
          </HashRouter>

          {this.state.product_details.map((product_detail, index) => (
            <tr>
              <td>{product_detail}</td>
              <p> &nbsp;</p>
            </tr>
          ))}
        </table>
      </div>
    );
  }
}
export default ProductDetail;

Comparecard.js（问题组件）

import React from "react";
const priceYugeAPI_KEY = "priceYugeAPI_KEY";

class CompareCard extends React.Component {
  state = {
    product_compare: []
  };

  componentDidMount() {
    console.log("inside did mount");
    console.log("prop", this.props.product_id);
    fetch(
      "https://price-api.datayuge.com/api/v1/compare/detail?" +
        `api_key=${priceYugeAPI_KEY}&id=${this.props.product_id}`
    )
      .then(response => response.json())
      .then(
        jsonResp => this.setState({ product_compare: jsonResp.data.stores }),
        error => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      );
    console.log("product_compare", this.state.product_compare);
  }

  render() {
    return (
      <div>
        <table>
          <th> Testbbbbbbbbbb {this.props.product_id}</th>
        </table>
      </div>
    );
  }
}

export default CompareCard;

我需要在CompareCard组件中为差异商家呈现数据

Answer 1

确定要更新状态吗？

在这里，您要在api调用完成之前调用console.log：

componentDidMount() {
    console.log("inside did mount");
    console.log("prop", this.props.product_id);
    fetch(
      "https://price-api.datayuge.com/api/v1/compare/detail?" +
        `api_key=${priceYugeAPI_KEY}&id=${this.props.product_id}`
    )
      .then(response => response.json())
      .then(
        jsonResp => this.setState({ product_compare: jsonResp.data.stores }),
        error => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      );
    // state hasn't been updated yet, fetch is async!
    console.log("product_compare", this.state.product_compare);
  }

render()的{{1}}中的任何内容都不代表该州的<CompareCard>。如果将console.log移到那里，您应该会看到它毕竟正在被更新。

product_compare

反应渲染问题

1 个答案: