Ant Design of Transfer 不在右侧显示初始值

Question

我指的是 this 实施转移列表。

但是即使我按照上面的方法做了，右边也没有显示初始值。
我一整天都在面对这个问题。

这是我的代码。

export default function UsersDetailPage(props: { project_id: number }) {

  const [leftDetailSkill, setLeftDetailSkill] = React.useState<[]>([]);
  function changeLeftDetailSkill(skill: React.SetStateAction<[]>) {
    setLeftDetailSkill(skill);
  }
  const [rightDetailSkill, setRightDetailSkill] = React.useState<[]>([]);
  function changeRightDetailSkill(skill: React.SetStateAction<[]>) {
    setRightDetailSkill(skill);
  }

...
  return (
          <ProjectInput
            WrapData={{
              rightSkill: rightDetailSkill,
              changeRightSkill: changeRightDetailSkill,
              leftSkill: leftDetailSkill,
              changeLeftDetailSkill: changeLeftDetailSkill,
            }}
          />
  )

export default function ProjectInput(props: ProjectInputProps) {
  return (
          <PrTransferListSkills
            {...{
              items: props.WrapData.leftSkill,
              rightSkill: props.WrapData.rightSkill,
              changeRightSkill: props.WrapData.changeRightSkill,
              changeLeftDetailSkill: props.WrapData.changeLeftDetailSkill,
            }}
          />
...

import { Transfer } from "antd";

const TransferListComponent = React.memo((props: TransferListProps) => {
  const tmpRight: any = [];
  const tmpLeft: any = [];

  const handleChange = (value: any) => {
    props.changeRightSkill(value);
  };

  const getMock = () => {
    axios
      .get(`${process.env.NEXT_PUBLIC_ENDPOINT}/admin/pr_detail_data/`, {
      ...
      })
      .then((response) => {
        response.data.project_key.map((value: []) => {
          tmpRight.push(value);
        });
        response.data.detail_skills.map((value: []) => {
          tmpLeft.push(value);
        });

        props.changeLeftDetailSkill(tmpLeft);
        props.changeRightSkill(tmpRight);
      })
      .catch(() => {});
  };

  useEffect(() => {
    getMock();
  }, []);

  return (
    <Transfer
      showSearch
      dataSource={props.items}
      render={(item) => item.name}
      targetKeys={props.rightSkill}
      onChange={handleChange}
    />
  );
});

export default function PrTransferListSkills(props: TransferListProps) {
  return (
    <TransferListComponent
      {...{
        items: props.items,
        changeLeftDetailSkill: props.changeLeftDetailSkill,
        rightSkill: props.rightSkill,
        changeRightSkill: props.changeRightSkill,
      }}
    />
  );
}

使用 axios 我将像 [1, 4] 一样获取 number[] 和 [{id: 2 , key:2, name: "Javascript"}] 作为 {id: number, key: number, name: string}[]

从上面的代码来看，左侧的传递和初始值都可以。

enter image description here

但是在显示器挂载时右侧的初始值不显示。
我认为如果右侧的初始值为 number or string[] 它应该显示对应于 key.

的值

让我显示一下右侧的初始值。

0: 1
1: 4
length: 2

那么如果我从左边传一个值，这个值就是：

0: 2
1: 1
2: 4
length: 3

但是该值仅显示 0: 2
实在想不通该怎么办..

Answer 1

幸运的是左侧数据..
左侧数据必须包含右侧数据。

这就是未显示初始值的原因。

之前

left-side data

{
id: 3
key: 3
name: example3
},
]

right-side data

[1,2]

之后

left-side data

{
id: 1
key: 1
name: example1
},
{
id: 2
key: 2
name: example2
},
{
id: 3
key: 3
name: example3
},
]

right-side data

[1,2]

Ant Design of Transfer 不在右侧显示初始值

Ant Design of Transfer doesn't show Initial value in right side

reactjs

next.js

antd