javascript - react : How to Import and use function to component with setState?

Question

我的 React 组件中有一些大功能方法，我想将这些功能放在单独的文件中，使用 es6 模块系统导入它们。问题在于，在这些方法中，我正在使用 setState 方法更改父组件的状态。在单独的文件中使用函数、导入此函数并使用简单的 setstate 方法的最佳方法是什么？

请参阅 fetchProducts 方法。我想从单独的文件导入这个方法

代码如下:

import React from 'react'
import Header from '../components/Header'

class Main extends React.Component { 
 constructor(props) {
    super(props)
    this.state = {
        firstDetected: false,
        detected: false,
        products: [],
        selectedProduct: null,
        premiumImage: null,
        productImages: [],
        productPrice: null,
        dataFromServer: null,
        default_gender: null,
        bgImage: null,
        productsExtension: null,
        mediaCdn: null,
        fade: false,
        hello: false,
        helloEnd: false,
        collection: false,
        collectionEnd: false,
        capturedImage: null,
        imageReady: false,
        gender: null,
        waitForEnding: true

    }
 }

 componentWillMount() {
    this.fetchProducts(1)
 }

 fetchProducts = (init) => {
    auth.fetch(`${baseUrlTest}/products/get-user-products?init=${init}`)
        .then(res => {

            if (Object.keys(res).length) {
                console.log(res)
                const productsExtension = res['products.extension']
                const mediaCdn = res['media.cdn']
                const randomProduct = randomize(res['products'])

                this.setState({
                    dataFromServer: res,
                    products: res.products,
                    selectedProduct: randomProduct,
                    default_gender: res.default_gender,
                    bgImage: res['background.image'],
                    productsExtension: productsExtension,
                    mediaCdn: mediaCdn,
                    gender: res.default_gender,
                    premiumImage: mediaCdn + randomProduct.image + '.' + productsExtension.find(k => k === 'jpg'),
                    productPrice: randomProduct.price,
                    productImages: res.products.filter((prod) => {
                        return prod.gender === res.default_gender
                    }).map((prod) => {
                        return prod
                    })

                })

                console.log(res.products)

            }
        })
  }

}

Answer 1

没有 Redux 的解决方案

1. 我们将 fetchProduct 函数导出为一个模块
2. 导入我们的Main组件
3. 将 fetchProduct 分配给我们的组件

We can't use arrow function for fetchProduct.js As stated in YDKJS - "ES6 arrow-functions use lexical scoping for this binding, which means they adopt the this binding (whatever it is) from its enclosing function call."

fetchProducts.js

// Export the function as a module
export default function fetchProducts(init) {
    auth.fetch(`${baseUrlTest}/products/get-user-products?init=${init}`)
        .then(res => {

            if (Object.keys(res).length) {
                console.log(res)
                const productsExtension = res['products.extension']
                const mediaCdn = res['media.cdn']
                const randomProduct = randomize(res['products'])

                this.setState({
                    dataFromServer: res,
                    products: res.products,
                    selectedProduct: randomProduct,
                    default_gender: res.default_gender,
                    bgImage: res['background.image'],
                    productsExtension: productsExtension,
                    mediaCdn: mediaCdn,
                    gender: res.default_gender,
                    premiumImage: mediaCdn + randomProduct.image + '.' + productsExtension.find(k => k === 'jpg'),
                    productPrice: randomProduct.price,
                    productImages: res.products.filter((prod) => {
                        return prod.gender === res.default_gender
                    }).map((prod) => {
                        return prod
                    })

                })

                console.log(res.products)

            }
        })
  }

Main.js

import React from 'react'
import Header from '../components/Header'
// Import the exported function from fetchProduct.js
import fetchProducts from "../middleware/fetchProduct.js"

class Main extends React.Component { 
 constructor(props) {
    super(props)
    this.state = {
        firstDetected: false,
        detected: false,
        products: [],
        selectedProduct: null,
        premiumImage: null,
        productImages: [],
        productPrice: null,
        dataFromServer: null,
        default_gender: null,
        bgImage: null,
        productsExtension: null,
        mediaCdn: null,
        fade: false,
        hello: false,
        helloEnd: false,
        collection: false,
        collectionEnd: false,
        capturedImage: null,
        imageReady: false,
        gender: null,
        waitForEnding: true
    }
 }
 componentWillMount() {
    // Assign fetchProducts into your Component
    this.fetchProducts = fetchProducts.bind(this);
    // Call fetchProduct() inside your Component
    this.fetchProducts();
 }
}