尝试使用map.filter过滤出我的结果来写出一系列元素时出错

Question

我有这个组件，它创建了一个标签集合，以供另一个组件元素使用。

我正在尝试根据过滤器写出选项，使其看起来像这样：

<optgroup label "PlayerOnly"></optgroup>
<option value ="1" label="Fighter" />
<option value ="2" label="Wizard" />
<option value ="3" label="Theif" />
<optgroup label "MonsterOnly"></optgroup>
<option value ="4" label="Troll" />
<option value ="5" label="Giant" />
<option value ="6" label="Goblin" />

它通过名为groupById的字段将它们分组。

但是当我尝试运行它时，我只会收到此错误：

Syntax error: Binding invalid left-hand side in function parameter list

这里是组件：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const OptionList = () => {

    const [data, setData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const result = await axios(
                'https://localhost:44376/api/characters',
            );
            setData(result.data);
        };
        fetchData();
    }, []);

    return (
        <>
            <optgroup label="PlayerOnly"></optgroup>
            {data.filter((item => item.groupById == 7) => (
            <option key={index} value={item.id} label={item.name} />
            ))}
            <optgroup label="MonsterOnly"></optgroup>
            {data.filter((item => item.groupById == 11) => (
            <option key={index} value={item.id} label={item.name} />
            ))}
        </>

    );
}
export default OptionList;

Answer 1

{data.filter(item => item.groupById == 7).map((item, index) => (
        <option key={index} value={item.id} label={item.name} />)
}

尝试一下，您正在传递一个函数作为左手参数来进行过滤，而不是进行迭代。