Question

我正在使用一个小应用程序，我正在使用react.js。由于我是初学者，我有一些问题。

我想映射我的数组，但它不起作用。我按照了一个youtube教程，不同之处在于数组中填充了硬编码数据。我正在获取数据并在获取完成后将其添加到数组中。（JSON对象）。

import React from "react";
import Product from "./Product"

export default class ProductList extends React.Component{
render()
{ console.log("productlist")

    return (
     <ul>
     {this.props.products.map((product, i) => 
        { return <Product product={product} key={i}/>  })}
        {console.log("test")}
    </ul> 
     )

}
}

console.logs有效，但map-function没有。我试过没有Id，并以不同的方式，但它不会工作。我希望数据传递到我的最后一个组件，称为Product。有我的＆lt;李＆GT;我想填充的元素。

当我刚刚将“this.props.products”传递给“”时，我到达了Product组件，但没有数据填充。 import from“react”;

export default class Product extends React.Component{
render(){
    console.log("product")

    return (   
  <li> {this.props.product.title} {this.props.product.price} <img src={this.props.product.imageUrl}/> </li>
    )
}
}

我正在使用fetch方法从Json文件中获取数据。

fetch('http://localhost:8080/products')
.then(
response =>
  response.ok
    ? response.json()
    : Promise.reject(Can't communicate with REST API server (${response.statusText})`),
)
.then(products => {
    products.forEach(product => productArray.push(product));
})

正如您在上面所看到的，我将Jsonfile中的产品添加到我创建的数组中。而且我不确定这是否会导致我的问题。

import React from "react";
import ReactDOM from "react-dom";
import Container from "./Components/Container";

let productArray = []; 
const app = document.getElementById('app');
ReactDOM.render(<Container products={productArray}/>, app)

我使用ReactDOM.render将我的数组传递到我的Container.js文件中。在Container.js文件中，我还从反应导入React并从./Productlist导入ProductList。所以我继续传递数组（我已经检查过它是否有值，并且有。

  <ProductList products = {this.props.products}/>

Answer 1

这是因为products请求完成时fetch已过时。即使您更新（通过productArray.push），您的组件也不知道此类更改。更不用说这是一个糟糕的模式。

为此，请使用正确的React组件lifecycle方法和state处理。

在Container组件中：

const Container extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      products: [], // Initialize product as an empty array
    }
  }

  componentDidMount() {
    fetch('http://localhost:8080/products')
      .then(response =>
        response.ok
          ? response.json()
          : Promise.reject(`Can't communicate with REST API server (${response.statusText})`),
      )
      .then(products => {
        this.setState({ products }) // Notify your component that products have been fetched
      })
  }

  render() {
    return (
      <div>
         ...
        <ProductList products={this.state.products} />
      </div>
    )
  }
}

请注意setState may be asynchronous。如果您将来获取新数据，请不要犹豫使用@Luke M Willis指出的这样的功能：

this.setState(prevState => ({
  products: [ ...prevState.products, ...products ],
}))

Answer 2

@MissAndersson你在哪里调用你的获取功能？

如果你在React组件之外调用你的获取功能，那可能就是问题所在。您的React组件无法正确重新呈现。

只要状态或道具发生变化，React组件就会重新呈现。请参阅此CodeSandbox示例。（https://codesandbox.io/s/812yv7wjrl）

我的获取功能更新了组件的状态，这会强制重新渲染。

组件中的React-Map功能不起作用

2 个答案: