ant-design / ant-design-mobile

Essential UI blocks for building mobile web apps.
https://mobile.ant.design
MIT License
11.51k stars 2.38k forks source link

[Bug] Picker value shouldn't strict equality #6540

Open Yueyanc opened 5 months ago

Yueyanc commented 5 months ago

Version of antd-mobile

5.34.0

Operating system and its version

Others

Browser and its version

No response

Sandbox to reproduce

No response

What happened?

由于time的初始值设为了['2024','xx','xx','xx'],代码中!column.some(item => item.value === value)用了严格等于,导致触发了onChange. 考虑换成==

  useIsomorphicLayoutEffect(() => {
    if (column.length === 0) {
      if (value !== null) {
        onSelect(null);
      }
    } else {
      if (!column.some(item => item.value === value)) { // 这里
        const firstItem = column[0];
        onSelect(firstItem.value);
      }
    }
  }, [column, value]);

Relevant log output

import React, { useState, useMemo } from "react";
import { Button, PickerView, Popup } from "antd-mobile";
import _ from "lodash";
import dayjs from "dayjs";
const deafultTimeColumns = [
  _.range(2000, 2024).map((item) => ({ label: `${item}年`, value: item })),
  _.range(1, 13).map((item) => ({ label: `${item}月`, value: item })),
  _.range(1, 32).map((item) => ({ label: `${item}日`, value: item })),
  _.range(0, 24).map((item) => ({ label: `${item}时`, value: item })),
];
export default function App() {
  const [open, setOpen] = useState(false);
  const [time, setTime] = useState(dayjs().format("YYYY-MM-DD-HH").split("-"));
  const timeColumns = useMemo(() => {
    const daysInMonth = dayjs(`${time[0]}-${time[1]}`).daysInMonth();
    const newColumns = [...deafultTimeColumns];
    newColumns[2] = _.range(1, daysInMonth + 1).map((item) => ({
      label: `${item}日`,
      value: item,
    }));
    return newColumns;
  }, [time]);
  return (
    <div className="App">
      <h1>Hello Antd Mobile</h1>
      <Button
        onClick={() => {
          setOpen(true);
        }}
      >
        打开
      </Button>
      <Popup visible={open}>
        <PickerView
          columns={timeColumns}
          value={time}
          onChange={(val, extend) => {
            setTime(val);
            console.log("onChange", val, extend.items);
          }}
        />
      </Popup>
    </div>
  );
}