React结合MUI实现汇率过滤功能，动态生成按钮无法显示问题求助

问题原因 #

你的代码存在4个核心问题导致按钮无法渲染：

• rateSearch函数没有返回值，筛选映射得到的Button数组没有被暴露到外部
• 生成的按钮数组没有被放到组件返回的JSX结构中，React不会主动渲染未在返回值里声明的元素
• 初始rates状态设为数组不符合接口返回结构，接口返回的是对象，原有加载判断逻辑存在错误隐患
• 使用useRef存储输入内容不符合React受控组件设计思路，会额外增加状态同步的复杂度

修正后可运行代码 #

import React, {useEffect, 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';
import Stack from '@mui/material/Stack';

const RatesButton = () => {
    // 新增搜索关键词状态，做受控输入框
    const [searchKey, setSearchKey] = useState('')
    // 初始rates设为null，区分加载状态
    const [rates, setRates] = useState(null);
    
    useEffect(() => {
        fetch("https://api.vatcomply.com/rates")
            .then(ratesResponse => ratesResponse.json())
            .then(rates => setRates(rates));
    }, [])

    // 加载中状态
    if (!rates) {
        return (
            <Box sx={{display: 'flex', justifyContent: 'center', mt: 2}}>
                <CircularProgress/>
            </Box>
        )
    }

    // 直接计算符合条件的币种按钮
    const rateButtons = Object.keys(rates.rates)
        // 忽略大小写匹配，优化体验
        .filter(rate => rate.toUpperCase().includes(searchKey.toUpperCase()))
        .map(rate => (
            <Button key={rate} variant="outlined">
                {rate}
            </Button>
        ))

    return (
        <Box sx={{p: 2}}>
            <TextField 
                id="rate-search" 
                value={searchKey}
                onChange={(e) => setSearchKey(e.target.value)}
                label="搜索币种" 
                variant="outlined"
                fullWidth
                sx={{mb: 2}}
            />
            {/* 渲染按钮组，用Stack做简单排版 */}
            <Stack direction="row" spacing={1} flexWrap="wrap" gap={1}>
                {rateButtons}
            </Stack>
        </Box>
    )
}

export default RatesButton

核心修改说明 #

1. 用searchKey状态接管输入框内容，改成受控组件，不需要再用useRef获取输入值，状态变更会自动触发组件重渲染
2. 把筛选按钮的逻辑提到渲染阶段直接计算，结果直接插入到JSX的按钮容器中，输入框内容变化时会自动重新筛选渲染按钮
3. 修正了加载判断逻辑，调整rates初始值为null，避免接口返回对象后判断逻辑失效
4. 新增了忽略大小写的匹配逻辑，同时用MUI的Stack组件做了按钮排版，避免按钮溢出

内容的提问来源于stack exchange，提问作者0Interest