search

ant-design / ant-design-mobile-rn

Ant Design for React Native
https://rn.mobile.ant.design/
MIT License
3.09k stars 611 forks source link

[Bug] ERROR Warning: forwardRef render functions accept exactly two parameters: props and ref #1362

Closed arlovip closed 3 months ago

arlovip commented 3 months ago

💬 Before You Start

🙋 Description/Step to reproduce

 ERROR  Warning: forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer

🔴 Version

10.7.0

💻 Environment

Android

⚫️ Output of npx react-native info

info Fetching system and libraries information...
(node:41690) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
System:
  OS: macOS 14.3.1
  CPU: (8) arm64 Apple M2
  Memory: 79.48 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.1.0
    path: ~/.nvm/versions/node/v22.1.0/bin/node
  Yarn:
    version: 1.22.19
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.7.0
    path: ~/.nvm/versions/node/v22.1.0/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.3 AI-233.14808.21.2331.11709847
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 2.7.5
    path: /Users/lang/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.4
    wanted: 0.73.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Additional comments

"@ant-design/react-native": "^5.2.1",
bigmeow commented 3 months ago

I also encountered this problem. I tried switching versions to find the problematic version and found that versions "5.1.3" and "5.2.0-rc.2" were normal; Version 5.2.1 is problematic. Further investigation revealed that this warning prompt only appears when the "form" component is used.

arlovip commented 3 months ago

I fixed it to add ref to InnerNoticeBar in notice-bar.js file.

// Add ref here.
function InnerNoticeBar(props, ref) {
  ....
  return _react["default"].createElement(_reactNative.TouchableWithoutFeedback, { onPress: onPress }, childNode);
}

var NoticeBar = (0, _react.forwardRef)(InnerNoticeBar);
exports.NoticeBar = NoticeBar;
bigmeow commented 3 months ago

Looking forward to your PR. https://github.com/ant-design/ant-design-mobile-rn/blob/b015be0e8ae3623304d8ff4452d6033435684872/components/notice-bar/notice-bar.tsx

Jhh910 commented 3 months ago

I fixed it to add ref to InnerNoticeBar in notice-bar.js file.

// Add ref here.
function InnerNoticeBar(props, ref) {
  ....
  return _react["default"].createElement(_reactNative.TouchableWithoutFeedback, { onPress: onPress }, childNode);
}

var NoticeBar = (0, _react.forwardRef)(InnerNoticeBar);
exports.NoticeBar = NoticeBar;

How do I operate? I try it like this,but failed image

arlovip commented 3 months ago

@Jhh910 You seem to miss some code snippets as can be seen above. What you need to do is to search function InnerNoticeBar(props) and add ref after props like function InnerNoticeBar(props, ref). No futher steps are required.

Jhh910 commented 3 months ago

@Jhh910 You seem to miss some code snippets as can be seen above. What you need to do is to search function InnerNoticeBar(props) and add ref after props like function InnerNoticeBar(props, ref). No futher steps are required. only add ",ref" ? also failed image

npx react-native info warn Package react-native-amap3d contains invalid configuration: "dependency.platforms.ios.project" is not allowed. Please verify it's properly linked using "react-native config" command and contact the package maintainers about this. info Fetching system and libraries information... System: OS: Windows 10 10.0.22621 CPU: (16) x64 12th Gen Intel(R) Core(TM) i5-12500H Memory: 875.18 MB / 15.73 GB Binaries: Node: version: 20.15.1 path: D:\nodejs\node.EXE Yarn: version: 1.22.22 path: ~\AppData\Roaming\npm\node_modules\yarn\bin\yarn.CMD npm: version: 10.7.0 path: D:\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: Not Found Windows SDK: Not Found IDEs: Android Studio: Not Found Visual Studio:

arlovip commented 3 months ago

@Jhh910 Yes. Only add ref to InnerNoticeBar. I created a new project again, installed it and modified function InnerNoticeBar(props, ref) {. It also works well. So maybe you lost something else. Please check you logic. For example, check the logs warnings on your device or simulator? Simulator Screenshot - iPad Air 11-inch (M2) - 2024-08-06 at 21 38 45

Jhh910 commented 3 months ago

So maybe you lost something else

thank you for your answer，but i cannot modified other except function InnerNoticeBar(props, ref) i dont know how to check the ant-design，At present, there is no impact on operation，There's only one warning or error image

Jhh910 commented 3 months ago

i try it again today,it is succefful Yesterday was weird. thank you very much again