如何从另一个函数访问 class 组件内的函数？

Question

我是 React 的新手，我正在尝试编写一个使用 API 的应用程序。代码更广泛，所以我删掉了问题部分并放在这里，我不知道这是否有可能做到，所以如果有人知道如何去做，那将是一个很大的帮助。

-说明.
当我调用 deleteProduct() 并通过 props 传递给外部函数 listTemplate.js 时，内部 getProducts() 给了我这个错误：

Unhandled Rejection (TypeError): this.getproducts is not a function

export default class test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
    };
  }
  async componentDidMount() {
    this.getproductos();
  }

  async getproducts() {
    const res = await axios.get("http://localhost:5000/api/productos");
    this.setState({ products: res.data });
    //Set in products info like {products:[name: 'shoes', model:'XXL', price:'90' ]}.
  }

  async deleteProduct(id) {
    await axios.delete("http://localhost:5000/api/productos/" + id); //Delete selected product.
    this.getproductos(); //get actualized products array.
  }

  render() {
    const { products } = this.state;
    return (
      <div className="col-md-6">
        <ListTemplate products={products} delBtn={this.deleteProduct} /> //here i pass through listTemplate deleteProduct() function.
      </div>
    );
  }
}



/******************************************************************************/

在另一个 .js 文件中我有这个：

export default function ListTemplate(props) {
  const { products } = props.product;
  return (
    <div className="container">
      <div className="header">
        <h2>Product List:</h2>
      </div>
      {products.map((product) => (
        <div class="body" key={product._id}>
          <span>{product.name}</span>
          <span>{product.model}</span>
          <span>${product.price}</span>
          <button
            type="button"
            class="btn btn-danger btn-sm"
            onClick={(e) => {
              props.delBtn(product._id);
            }}
          >
            Delete Item
          </button>
        </div>
      ))}
    </div>
  );
}

我的问题是 deleteProduct() 完成并尝试 getProduct()。爆炸.

Answer 1

尝试创建一个类似

的箭头方法

deleteProduct = async (id) => {
    ...
}

如何从另一个函数访问 class 组件内的函数？

how to access to a function inside a class component from another function?

components

function

this

reactjs

react-component