React中GET请求后动态生成导航下拉链接失败求助

你的代码核心问题在于使用forEach遍历数据时没有返回JSX元素，React无法识别并渲染这些元素。forEach只是执行遍历操作，不会返回任何值，而我们需要返回一个JSX元素数组来让React渲染。

修复步骤： #

1. 将data.forEach()替换为data.map()，map会返回包含每个对应JSX元素的新数组。
2. 确保在response !== null的分支里返回这个map生成的数组。
3. 给每个列表项添加唯一的key属性（React要求列表元素必须有唯一key，这里用item.cCode即可）。

修复后的代码片段： #

<Get url="http://api.request/locations">
    {(error, response, isLoading, axios) => {
        if (error) {
            return (<div>Something bad happened: {error.message}</div>)
        }
        else if (isLoading) {
            return (<div>Loading...</div>)
        }
        else if (response !== null) {
            const data = response.data;
            // 用map替代forEach，并返回结果，添加key属性
            return data.map(item => (
                <LinkContainer key={item.cCode} to={item.cCode}>
                    <NavDropdown.Item eventKey={item.cCode}>{item.cName}</NavDropdown.Item>
                </LinkContainer>
            ));
        }
        // 处理其他情况（比如response为null的初始状态）
        return null;
    }}
</Get>

为什么这样能解决问题？ #

• forEach没有返回值，原来的代码里遍历后没有生成任何可被React渲染的内容，所以下拉列表为空。
• map会遍历数组并返回每个元素对应的JSX，这些元素组成的数组会被React渲染成下拉菜单的选项。
• 添加key属性是React列表渲染的要求，帮助React高效更新DOM。

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