Question

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

在下表中，我有两个按钮，第一个按钮是“更改为最小”，第二个按钮是“更改为最大”。

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

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

这是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

Answer 1

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

enc = [(a * ord(char)) + b for char in ans]
#[355, 191, 479, 507, 511, 467, 191, 547, 507, 531, 191, 479, 451, 535, 467, 191, 475, 507, 507, 463, 191, 539, 467, 451, 527, 479, 467, 519, 191, 539, 479, 483, 495, 467, 191, 355, 191, 451, 499, 191, 475, 507, 503, 467, 247]

如何在反应中将功能传递给功能组件中的另一种状态

1 个答案: