javascript - 尝试使用 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} />
)}

试试这个，您将函数作为左侧参数传递给过滤器，而不是可迭代的。