javascript - 如何从另一个函数更改任何函数组件的状态？

Question

React 16.8 将状态和 setState 功能引入基于函数的组件中。

我的问题是:
对于基于函数的组件，有什么方法可以更改函数外部的状态？

示例:

import {useState} from 'react';
import Axios from 'axios';


function fetch_all_products(){
    Axios.get(url)
        .then(
            response => {
                let data = response.data;

                //FROM HERE I WANT TO SET THIS DATA INTO SHOP COMPONENT
                // STATE (i.e, products) AND RE RENDER THE SHOP COMPONENT
            }
        )   
}



export default function Shop(){
    const[products, setProducts] = useState(products['Rice','Oil']);

    let all_products = products.map( product => {
        return(
            <li>product</li>
        )
    });

    return(
        <>
            <h2>The Grocery Shop </h2>
            <button onClick={fetch_all_products}>See All Products </button>
            <ul>
                {all_products}
            </ul>
        </>
    )
}

我想使用“fetch_all_products”函数在函数外部更改 Shop 组件的状态(产品)。

Answer 1

最后我想出了一个简单的解决方案。

我不是在组件函数外部使用基本函数，而是在组件函数内部使用它(“fetch_all_products”在“Shop”内部使用)。

[我的问题中有一个愚蠢的语法错误，此处也已更正]

代码:

import { useState } from 'react';
import Axios from 'axios';

export default function Shop() {
  const [products, setProducts] = useState(['Rice', 'Oil']);

  function fetch_all_products() {
    Axios.get(url).then((response) => {
      let data = response.data;
      setProducts(data);
    });
  }

  let all_products = products.map((product) => <li>{product}</li>);

  return (
    <>
      <h2>The Grocery Shop </h2>
      <button onClick={fetch_all_products}>See All Products </button>
      <ul>{all_products}</ul>
    </>
  );
}

感谢所有试图以不同方式帮助我的人。