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

【问题标题】：How to change any function Component's state from another function?如何从另一个函数更改任何函数组件的状态？
【发布时间】：2020-01-07 00:47:14
【问题描述】：

React 16.8 将 state 和 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 组件的状态（产品）。

【问题讨论】：

在 fetch all 中使用回调
您能用代码描述一下吗？ @DennisVash

标签： javascript reactjs react-component react-state-management

【解决方案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>
    </>
  );
}

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

【讨论】：

请尝试投票或接受对您有帮助的答案
我也尝试为您的答案投票，但由于我的声誉点非常低，stackoverflow 并没有除了我的投票。无论如何，谢谢@TapanDave
好的，谢谢，如果可以，请接受作为答案

【解决方案2】：

您可以使用回调来执行此操作。方法如下：

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

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

2.) 创建一个类方法（类中的一个函数），它将调用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>

【讨论】：

在第 2 点中，您编写了一个类方法，但我的组件完全是“功能组件”。这里没有课程@Devashish
@Shamim 对不起我的错。虽然，校长仍然保持不变。您是否尝试过这种方法？

【解决方案3】：

您可以做这样的事情的其他方式，承诺将是您正在执行的 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>

【讨论】：