I ran into an incomprehensible bug when I used [email protected]

[redchili-source]

Describe the bug
I have a storybook for my searchBar component, It will cause an error when I used [email protected], but everything is normal when I used [email protected] .

This bug is like this:

Code snippets
My SearchBar components is this:
index.tsx

/* eslint-disable react/destructuring-assignment */
import React, { PureComponent } from "react";
import { SchemaForm, Submit, createFormActions } from "@uform/antd";
import { Button } from "antd";
import { Fixed as SpaceFixed } from "react-spaces";

import "./index.scss";

interface Props {
  isOneTimeReset?: boolean; // NOTE:一次性重置标识
  schema: object;
  onCaptureForm: Function;
  onSearchReset?: Function;
  inline?: boolean;
  labelCol?: number;
  wrapperCol?: number;
  border?: boolean;
}
interface State {
  isSeach: boolean;
  hasReset?: boolean;
}

const actions = createFormActions();

export default class SearchBar extends PureComponent<Props, State> {
  state: State = {
    isSeach: false,
    hasReset: false // NOTE: 用于从 /order/list?uid=xxx 跳转到 /order/list 重新搜索框的标识
  };

  static getDerivedStateFromProps(props: Props, state: State) {
    if (props.isOneTimeReset && !state.hasReset) {
      actions.reset(true, false);
      return {
        hasReset: true,
        isSeach: false
      };
    }
    return null;
  }

  onSubmit = (v: any) => {
    // NOTE: 应该判断当 v 是空对象时不触发
    if (Object.keys(v).length > 0) {
      /* eslint-disable-next-line */
      this.props.onCaptureForm(v);
      this.setState({
        isSeach: true
      });
    }
  };

  onReset = () => {
    const { onSearchReset } = this.props;
    if (onSearchReset) {
      onSearchReset();
    }
    actions.reset(true, false);
    this.setState({
      isSeach: false
    });
  };

  render() {
    const { schema, inline, labelCol, wrapperCol, border } = this.props;
    const { isSeach } = this.state;
    return (
      <div className={`search_bar--box ${border ? "border" : ""}`}>
        <SchemaForm
          inline={inline === undefined ? true : inline}
          onSubmit={this.onSubmit}
          actions={actions}
          labelCol={labelCol}
          wrapperCol={wrapperCol}
          schema={schema}
        >
          <div className="btn_search_groups">
            <Submit>搜索</Submit>
            <SpaceFixed width={12} height={0} />
            {isSeach ? (
              <Button type="primary" onClick={this.onReset}>
                全部
              </Button>
            ) : (
              ""
            )}
          </div>
        </SchemaForm>
      </div>
    );
  }
}

index.scss

.search_bar--box {
  margin: 0 10px 20px 24px;
  padding: 20px 10px 0;
  .border {
    border: 1px solid #eee;
  }
  .btn_search_groups{
    display: flex;
    justify-content: flex-start;
  }
}

search_bar.stories.tsx

import React from "react";

// import Test from "../package/search-bar/src/test";
import SearchBar from "../package/search-bar/src";

import "antd/dist/antd.css";

export default {
  title: "搜索条"
};

interface SearchKey {
  name: string;
}

const schema = {
  type: "object",
  properties: {
    name: {
      type: "radio",
      enum: ["1", "2", "3", "4"],
      title: "name"
    }
  }
};
const onSearch = (v: SearchKey) => {
  console.log(
    "%c搜索关键词",
    "background: #69c0ff; color: white; padding: 4px",
    v
  );
};

export const Demo = () => {
  return <SearchBar schema={schema} onCaptureForm={onSearch} />;
};

Expected behavior
It's also normal when I used [email protected] , just like I used [email protected] .

Screenshots

If applicable, add code samples to help explain your problem.

System:
Please paste the results of npx -p @storybook/cli@next sb info here.

System:
OS: macOS Mojave 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Binaries:
Node: 13.0.1 - ~/.nvm/versions/node/v13.0.1/bin/node
Yarn: 1.19.1 - ~/.yarn/bin/yarn
npm: 6.12.0 - ~/.nvm/versions/node/v13.0.1/bin/npm
Browsers:
Chrome: 78.0.3904.70
Firefox: 68.0
Safari: 13.0.3
npmPackages:
@storybook/addon-actions: ^5.2.4 => 5.2.5
@storybook/addon-info: ^5.2.4 => 5.2.5
@storybook/addon-links: ^5.2.4 => 5.2.5
@storybook/addons: ^5.2.4 => 5.2.5
@storybook/react: ^5.2.4 => 5.2.5

Additional context
Add any other context about the problem here.

[shilman]

@redchili-source Can you try forcing it to use "5.2.4" instead of "^5.2.4"? I suspect it is due to #8445, which I probably need to revert. Please let me know if that solves it, and I can release the fix in 5.2.6!

[redchili-source]

ok , wait a moment, I will try .

[redchili-source]

@shilman It's not ok , I use "5.2.4"

    "@storybook/addon-actions": "5.2.4",
    "@storybook/addon-links": "5.2.4",
    "@storybook/addons": "5.2.4",
    "@storybook/react": "5.2.4",

[shilman]

Still broken? Can you go back until it works and tell me which version broke it? 🙏🙏🙏

[redchili-source]

I just go home , I mentioned it in the issue title, " It workd when I used [email protected] " .

[redchili-source]

"@babel/preset-typescript": "^7.6.0",
"@storybook/addon-actions": "^5.2.1",
"@storybook/addon-links": "^5.2.1",
"@storybook/addons": "^5.2.1",
"@storybook/react": "^5.2.1",

[shilman]

Does it work in 5.2.2? 5.2.3?

Or can you provide a minimal reproduction so I can test it myself?

[redchili-source]

Your see that this version is working propertly.

[redchili-source]

@shilman How can I install this version 5.2.2 or 5.2.3 ? I try the commeder "npx -p @storybook/[email protected] sb init" , but I still get the lastet version .

[redchili-source]

@shilman ok , I will release this component so that you can test it .

[shilman]

You can just edit package.json to contain:

"@storybook/react": "5.2.2",
...

Then run npm install or yarn

NOTES:

• No caret ^
• Make sure all @storybook/* are the same version

[redchili-source]

OK , I will try it . This is my component package, you can test it . @redchili/search-bar

[redchili-source]

I have tried it use 5.2.2 ~ 5.2.4 , but just 5.2.1 can be used.

[redchili-source]

@shilman I'm sorry, I think that error of my component is caused by the new version 16.11 of react.