Ant Design 动态数据不绑定到 Select

Question

我正在为一个学校项目使用 react。动态数据不绑定到 Ant Design 的 Options，react js。结果是一个空的选项列表。实际上，数据来自外部 API。出于测试目的，我为数据分配了状态变量。数据以二维数组的形式出现，所以我对数据进行了两次映射。

结果是：

import { useEffect, useState } from "react";
import { Select } from "antd";
const { Option } = Select;

const Complete = () => {
    const [list, setPersons] = useState([
        [
            {
                id: 1,
                personName: "Owan",
            },
            {
                id: 2,
                personName: "More",
            },
            {
                id: 3,
                personName: "Jaila",
            },
            {
                id: 4,
                personName: "Eerov",
            },
        ],
        [
            {
                id: 5,
                personName: "Rell",
            },
            {
                id: 6,
                personName: "Juko",
            }
        ]
    ]);


    

    useEffect(() => {
        console.log(list);
    }, []);

    return (
        <Select
            showSearch
            style={{ width: 200 }}
            placeholder="Select a person"
            optionFilterProp="children"
            
            filterOption={(input, option) =>
                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
        >
            {list.map((l) => {

                l.map((person) => {
                    console.log(person);
                    <Option value={person.id}>
                        {person.personName}
                    </Option>;
                });
            })}
        </Select>
    );
};

export default Complete;

Answer 1

您只需要使用 ES6 功能更新小的脚本即可将 二维数组合并为单个数组

{[].concat(...list).map((l) => <Option value={l.id}>{l.personName}</Option>)}

这里是完整的脚本：

import { useEffect, useState } from "react";
import { Select } from "antd";
const { Option } = Select;

const Complete = () => {
    const [list, setPersons] = useState([
        [
            {
                id: 1,
                personName: "Owan",
            },
            {
                id: 2,
                personName: "More",
            },
            {
                id: 3,
                personName: "Jaila",
            },
            {
                id: 4,
                personName: "Eerov",
            },
        ],
        [
            {
                id: 5,
                personName: "Rell",
            },
            {
                id: 6,
                personName: "Juko",
            }
        ]
    ]);


    

    useEffect(() => {
        console.log(list);
    }, []);

    return (
        <Select
            showSearch
            style={{ width: 200 }}
            placeholder="Select a person"
            optionFilterProp="children"
            
            filterOption={(input, option) =>
                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
        >
            {[].concat(...list).map((l) => <Option value={l.id}>{l.personName}</Option>)}
        </Select>
    );
};

export default Complete;

访问实时示例demo

Answer 2

试试下面的代码：

import { useEffect, useState } from "react";
import { Select } from "antd";
const { Option } = Select;

const Complete = () => {
  const [list, setPersons] = useState([
    [
      {
        id: 1,
        personName: "Owan"
      },
      {
        id: 2,
        personName: "More"
      },
      {
        id: 3,
        personName: "Jaila"
      },
      {
        id: 4,
        personName: "Eerov"
      }
    ],
    [
      {
        id: 5,
        personName: "Rell"
      },
      {
        id: 6,
        personName: "Juko"
      }
    ]
  ]);

  useEffect(() => {
    console.log(list);
  }, [list]);

  return (
    <Select
      showSearch
      style={{ width: 200 }}
      placeholder="Select a person"
      optionFilterProp="children"
      filterOption={(input, option) =>
        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
      }
    >
      {list.map((l) => (
        <>
          {l.map((person) => (
            <Option value={person.id}>{person.personName}</Option>
          ))}
        </>
      ))}
    </Select>
  );
};

export default Complete;