過濾資料并將其回傳到“永久”資料旁邊-反應-有解無憂

我TextField從 MUI 庫中添加了一個，并useRef在用戶鍵入內容時使用鉤子捕獲值“live”。目的是僅過濾包含他鍵入的字符的比率。截至目前：

Object.keys(rates["rates"]) // ["EUR", "RON", "CZK", ...]

我添加了一個表單，我希望它保持持久，但按鈕應該動態變化。如果用戶沒有輸入任何內容，我想回傳所有內容（就像沒有過濾任何內容一樣）

我的嘗試：

import React, {useEffect, useRef, useState} from 'react'
import Button from '@mui/material/Button';
import CircularProgress from '@mui/material/CircularProgress';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';

const RatesButton = () => {
    const rateRef = useRef('')
    const [rates, setRates] = useState([]);
    useEffect(
        () => {
            fetch("https://api.vatcomply.com/rates")
                .then(ratesResponse => ratesResponse.json())
                .then(rates => setRates(rates));
        }
        , [])


    if (rates.length === 0) {
        return (
            <Box sx={{display: 'flex', justifyContent: 'center'}}>
                <CircularProgress/>
            </Box>
        )
    }

    const rateSearch = () => {
        Object.keys(rates["rates"]).filter(
            rate => rate.includes(rateRef.current.value)
        ).map(rate => {

                return (
                    <Button>
                        {rate}
                    </Button>
                )
            }
        )

    }

    return (
        <>
            <br/>
            <TextField id="rate-search" onChange={rateSearch} inputRef={rateRef} label="Rate" variant="outlined"/>
        </>
    )
}


export default RatesButton

我認為它作業得很好，我可以訪問用戶輸入的參考，過濾包含字母的所有費率，并將每個費率映射到 MUI Button。問題是它們沒有以某種方式顯示，而且我很迷茫，如何同時從兩個不同的函式回傳，同時保持一個持久性（輸入欄位），這非常令人困惑

過濾資料并將其回傳到“永久”資料旁邊 - 反應

不幸的是，按鈕沒有顯示......

uj5u.com熱心網友回復：

您應該使用過濾資料并將其回傳到“永久”資料旁邊 - 反應

uj5u.com熱心網友回復：

    import React, {useState} from 'react';
    import { throttle } from 'lodash';

    const RatesButton = () => {
      const [value, setValue] = useState("");
      const [rates, setRates] = useState({});

      useEffect(() => {
        fetch("https://api.vatcomply.com/rates")
          .then((ratesResponse) => ratesResponse.json())
          .then((rates) => setRates(rates.rates ?? {}));
      }, []);
      
      const handleChange = (e) => setValue(e.target.value);
      
      // it will prevent multiple render during fast typing
      const throttledChange = throttle(handleChange, 400);

      return (
        <>
          {Object.keys(rates).length === 0 && (
            <Box sx={{ display: "flex", justifyContent: "center" }}>
              <CircularProgress />
            </Box>
          )}
          {Object.keys(rates)
            .filter((rate) => rate.toLowerCase().includes(value.toLowerCase()))
            .map((rate) => {
              return <Button>{rate}</Button>;
            })}
          <br />
          <TextField
            id="rate-search"
            onChange={throttledChange} // don't use arrow function
            label="Rate"
            variant="outlined"
          />
        </>
      );
    };

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/318246.html

標籤：javascript 反应材质-ui

上一篇：為什么KeyboardEvent不能與這個Input元素一起作業？

下一篇：如何創建一個在狀態改變時運行的觸發器函式？