Question

我目前在导入模块并将其用于react时遇到问题。这已经被问到了，我已经尝试了已读的答案，但是什么也没有。我不确定自己在做什么错。

在App.js中，我正在导入此文件：

import { pullProductDetails } from './GetDetails';

在GetDetails.js中，我有这个：

export default pullProductDetails = () => {
      this.setState({isLoading: true});
      fetch('http://127.0.0.1:8000/product_details/fetch/36')
      .then(response => response.json())
      .then(json => {
        const quantityDetails = json.productQuanties.map((quantityDetail) => {
            quantityDetail.selected = false;
            quantityDetail.title = "Quantity";
        });
        this.setState(
          {
            quantityProduct: [...this.state.quantityProduct, ...json.productQuanties],
            isLoading: false,
          }, () => this.dropdownCounter()
        );
          });
    }

然后在app.js中将其绑定，以便可以使用“ this”

this.pullProductDetails = this.pullProductDetails.bind(this);

错误是它不能将其绑定到undefined，因为pullProductDetails是undefined。

我也尝试过：

export const pullProductDetails = () => {}

以上所有工作均未完成。我需要从App.js调用this.pullProductDetails。有什么想法吗？

Answer 1

您必须省略作业右侧的（this）

this.pullProductDetails = pullProductDetails.bind(this);

因为您要绑定的函数不是当前组件的函数。同样，pullProductDetails的定义也不应该是箭头函数，因为在箭头函数中，其上下文始终指向该函数的定义位置。

GetDetails.js：

export function pullProductDetails(){
  this.setState({isLoading: true});
  fetch('http://127.0.0.1:8000/product_details/fetch/36')
  .then(response => response.json())
  .then(json => {
    const quantityDetails = json.productQuanties.map((quantityDetail) => {
        quantityDetail.selected = false;
        quantityDetail.title = "Quantity";
    });
    this.setState(
      {
        quantityProduct: [...this.state.quantityProduct, ...json.productQuanties],
        isLoading: false,
      }, () => this.dropdownCounter()
    );
      });
}

在您的主文件中：

import pullProductDetails from './GetDetails';

然后添加构造函数：

constructor(props){
  super(props);
  this.pullProductDetails = pullProductDetails.bind(this);
}

无法绑定到导入的功能。错误未定义

1 个答案: