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

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

您可以使用回调来执行此操作。是这样的：

1.) 将回调传递给您的原始 fetch_all_products 函数。像这样：

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

2.) 创建一个 class 方法（class 中的函数），它将调用 fetch_all_products 并通过 onClick 调用此方法。像这样：

fetchProducts = () => {
    fetch_all_products(data => {
        // use the DATA here to set your state or modify it
    }
}

3.) 通过 onClick 调用上述方法，如下所示：

<button onClick={fetchProducts}>See All Products </button>

Answer 2

你可以用其他方式做这样的事情，承诺将是你正在做的 api 调用，然后在响应到达时解析它并使用 setData 设置状态：

例子

const { useState } = React;

function fetchData() {
  return new Promise(resolve => setTimeout(() => resolve(Math.random()), 500))
}

function App() {
  const [data, setData] = useState(0)

  function onClick() {
    fetchData().then(setData)
  }

  return (
    <div>
      <button onClick={onClick}>Get data</button>
      <div>{data}</div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

<div id="root"></div>

Answer 3

最后我想出了一个简单的解决办法。

我在组件函数内部使用了它，而不是在组件函数之外使用基本函数（'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>
    </>
  );
}

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

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

How to change any function Component's state from another function?

javascript

reactjs

react-component

react-state-management