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

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 有效，但映射函数无效。我尝试过不使用 Id，并以不同的方式尝试过，但它行不通。我希望数据传递到我的最后一个组件，称为 Product。有我想要填充的

元素。

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

导入 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>
    )
}
}

我正在使用获取方法从 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));
})

正如您在上面看到的，我将 Json 文件中的产品添加到我创建的数组中。而且我不确定这是否是导致我出现问题的原因。

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 文件中，我还有 import React from react 和 import ProductList from ./Productlist。所以我继续传递数组（我检查了它是否有值，并且有。

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

Answer 1

@MissAndersson 你在哪里调用你的 fetch 函数？

如果您在 React 组件之外调用 fetch 函数，那可能就是问题所在。您的 React 组件未正确重新呈现。

只要 React 组件的状态或 props 发生变化，它们就会重新渲染。请参阅此 CodeSandbox 示例。 (https://codesandbox.io/s/812yv7wjrl)

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

Answer 2

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

为此，使用适当的 React 组件 lifecycle methods and 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>
    )
  }
}

请注意setStatemay be asynchronous。如果您将来获取新数据，请毫不犹豫地使用@Luke M Willis 指出的此类功能：

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

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

React- Map function in component doesn't work

arrays

components

return

reactjs

map-function