React Native随机数生成并添加至列表功能实现问题求助

问题现状 #

现有React Native代码实现了随机数生成与渲染，但将随机数添加至列表的功能存在问题：

• 需点击两个按钮分别完成「生成随机数」和「添加至列表」操作
• 尝试合并两个功能时始终失败

问题根源 #

1. addNumber函数中仅引用了getRandomInt函数但未执行（缺少调用括号），无法生成新随机数
2. setNumber是异步操作，即使执行了getRandomInt，立刻访问number也无法获取最新生成的值，会导致添加旧值或undefined
3. 列表项未添加key属性，不符合React渲染规范
4. 未判断number是否为undefined，直接访问Calls.call[number-1]会触发报错

修正后的代码 #

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import Calls from './Calls';

export default function NumberGen() {
    const [number, setNumber] = useState();
    const [names, setNames] = useState([]);

    const getRandomInt = () => {
        const min = 1;
        const max = 90;
        const randomNumber = Math.floor(Math.random() * (max - min + 1) + min);
        setNumber(randomNumber);
        return randomNumber;
    }

    // 合并功能：生成随机数并直接添加至列表
    const generateAndAddNumber = () => {
        const newNumber = getRandomInt();
        setNames(current => [...current, newNumber]);
    }

    // 修复原添加函数（保留双按钮流程）
    const addNumber = () => {
        if (number === undefined) return;
        setNames(current => [...current, number]);
    }

    return (
        <>
            <View>
                <Button
                    title='生成随机数'
                    onPress={getRandomInt}
                />
                <Text>{number ?? '未生成随机数'}</Text>
                {number && <Text>{Calls.call[number - 1]}</Text>}
            </View>
            
            <Button title='添加到列表' onPress={addNumber} />
            <Button title='生成并添加' onPress={generateAndAddNumber} />

            <View>
                {names.map((element, index) => (
                    <Text key={index}>{element}</Text>
                ))}
            </View>
        </>
    );
};

关键修正说明 #

• 让getRandomInt返回生成的随机数，避免依赖异步的setNumber获取最新值
• 新增generateAndAddNumber函数，直接实现「生成+添加」的合并功能
• 修复addNumber函数，增加判断逻辑防止添加未生成的随机数
• 给列表项添加key属性，符合React列表渲染要求
• 优化显示逻辑，避免number未定义时出现错误或空白内容

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