如何在反应中将功能传递到功能组件中的另一个状态答案

【问题标题】：How to pass a function to another state in functional components in react如何在反应中将功能传递到功能组件中的另一个状态
【发布时间】：2020-04-23 10:34:04
【问题描述】：

我正在做一个 React 项目。在那个项目中，我在表格中显示来自后端的数据。在该表中，我显示了来自后端的最小值和最大值。

在桌子下面我有两个按钮，第一个按钮是 Change to Min，第二个按钮是 Change to Max。

现在我要做的是，我正在尝试对最大值进行排序。我的目标是，如果我单击“更改为最小值”按钮，那么在 UI 中，所有最大值都必须按升序到降序显示值。现在，如果我单击 Change to Max 按钮，那么在 UI 中，所有 Max 值都必须以降序到升序显示值。

我还编写了排序函数，并将该函数应用于“更改为最小值”按钮。但是我不知道如何将该函数传递给另一个状态。

这是 list.js

import React, { useState, useEffect } from 'react';
import { Table, Button } from 'reactstrap';
import Aumservice from '../../service/aum-service';
import { MdEdit } from 'react-icons/md';
import { IconContext } from "react-icons";


const List = (props) => {

const [sortData, setSortData] = useState(null)

    const [data, setData] = useState([])

useEffect(() => {
        (async function () {
            const response = await Aumservice.getAum()
            const dataResponse = response.data.list.map(ele => ele.maxValue)
            setSortData(dataResponse)
            setData(response.data.list)
        })()
    }, [])

const sortAscending = () => {
        let sortedData = sortData.sort((a, b) => a - b)
        console.log(sortedData)
        setData(sortedData)
    }
    const sortDescending = () => {
        let sortedData = sortData.sort((a, b) => b - a)
        setData(sortedData)
    }

return (
        <div>
<IconContext.Provider
                value={{ size: '25px' }}
            >
                <Table bordered>
                    <thead>
                        <tr>
                            <th>So No</th>
                            <th>Min</th>
                            <th>Max</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {data.map((currentValue, index) => {
                            return < tr key={index + 1} >
                                <th scope="row">{index + 1}</th>
                                <td>{currentValue.minValue}</td>
                                <td>{currentValue.maxValue}</td>
                               </tr>
                        })}
                    </tbody>
                </Table>
            </IconContext.Provider>
            <div className='min pr-5'>
                <Button onClick={sortAscending} className='primary'>Change to Min</Button>
            </div>
            <div className='max'>
                <Button className='secondary'>Change to Max</Button>
            </div>
        </div >
    )
}

export default List

【问题讨论】：

您正在表格中显示数据，但是您更改了未呈现的 sortData 状态。你可以在你的排序函数中使用 setData 而不是 setSortData

标签： reactjs

【解决方案1】：

您好，我已更新代码。请检查一下。希望对你有帮助。

import React, {useState, useEffect} from 'react';
import {Table, Button} from 'reactstrap';
import {IconContext} from "react-icons";

const SortedDataExample = (props) => {
    const [sortData, setSortData] = useState([]);

    useEffect(() => {
        setSortData([23, 435, 23, 345, 76, 878]);
    }, []);

    const sortAscending = () => {
        let sortedData = sortData.sort((a, b) => a - b);
        console.log(sortedData);
        setSortData(sortedData);
    };
    const sortDescending = () => {
        let sortedData = sortData.sort((a, b) => b - a);
        console.log(sortedData);
        setSortData(sortedData);
    };

    return (
        <div>
            <IconContext.Provider
                value={{size: '25px'}}
            >
                <Table bordered>
                    <thead>
                    <tr>
                        <th>So No</th>
                        <th>Min</th>
                        <th>Max</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    {sortData.map((currentValue, index) => {
                        return < tr key={index + 1}>
                            <th scope="row">{index + 1}</th>
                            <td>{currentValue.minValue}</td>
                            <td>{currentValue.maxValue}</td>
                        </tr>
                    })}
                    </tbody>
                </Table>
            </IconContext.Provider>
            <div className='min pr-5'>
                <Button onClick={sortAscending} className='primary'>Change to Min</Button>
            </div>
            <div className='max'>
                <Button onClick={sortDescending} className='secondary'>Change to Max</Button>
            </div>
        </div>
    )
};

export default SortedDataExample

【讨论】：