Question

React 16.8将state和setState功能引入了基于函数的Component。

我的问题是：
对于基于功能的组件，是否有任何方法可以更改功能以外的状态？

示例：

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”）。

[我的问题中存在一个愚蠢的语法错误，在此也已纠正]

代码：

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 => {
        return(
            <li>{product}</li>
        )
    });

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

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

Answer 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>

Answer 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>

如何从另一个功能更改任何功能组件的状态？

3 个答案: