标签: reactjs

我想使用 Jest 和 Enzyme 对 Next.js 的 getServerSideProps功能进行测试。该函数如下所示：

export const getServerSideProps: GetServerSideProps = async (context) => {
  const id = context?.params?.id;
  const businessName = getBusinessName(id);
  return {
    props: {
      businessName: response.data?.name,
      businessID: id,
    },
  };
};

但是，由于我context在函数中使用参数，因此我需要将上下文传递到测试中。我现在的测试看起来像：

it("check on good case", () => {
    const value = getServerSideProps(/*I'm not sure what to put here*/);
    expect(value).toEqual({props: {businessName: "Name", businessID: "fjdks"}})
  });

我的问题是我应该将什么传递给上下文参数。我知道它的类型必须是：GetServerSidePropsContext<ParsedUrlQuery>。但我不确定如何创建该类型。我可以将什么传递到函数中，同时也允许我id在参数中添加值？

我正在尝试使用新推出的 @stripe/stripe-react-native 包将 Stripe 支付链接到 React Native cli 电子商务应用程序，但在向 Stripe 提供程序元素提供可发布密钥时，我在 Android 模拟器中遇到错误

TypeError：null不是对象（评估'_NativeStripeSdk.default.initialise'）

我尝试使用普通模板将 stripe 包与另一个新创建的 React Native cli 应用程序集成，但仍然遇到相同的错误。我还使用 React Web 应用程序检查了条带可发布密钥，它工作正常。

这是我的 App.js

import {StripeProvider} from '@stripe/stripe-react-native';
import React from 'react';
import {StyleSheet, View, Text} from 'react-native';

const App = () => {
  return (
    <StripeProvider publishableKey="pk_test_51IeDvNS......">
      <View>
        <Text>Hello World...</Text>
      </View>
    </StripeProvider>
  );
};

这是我收到的错误

ERROR    TypeError: null is not an object (evaluating '_NativeStripeSdk.default.initialise')

This error is located at:
    in StripeProvider (at App.js:17)
    in App (at renderApplication.js:45) …

我正在测试我的应用程序，我有很长的侧边菜单，并且我有这样的代码：

cy.get('tab').click({force: true})

自动滚动发生在获取和单击之间，然后选定的选项卡不可见，因为顶部菜单的位置已固定。我找到了很多解决方案，但没有一个有效。到目前为止，我尝试.click({force: true})过在 get 和 click 之间.click(scrollBehaviour: false})进行尝试.scrollIntoView()。还有其他方法可以解决这个问题吗？

我正在尝试实现具有搜索功能的 Antd 下拉菜单，并希望在单击外部时关闭下拉菜单。但在我的代码中，即使我单击搜索框，也会在单击外部时切换下拉列表的打开和关闭（不需要）。我希望只有在搜索框中输入了一些字符时才打开下拉菜单，如果搜索框中没有字符或在外部单击则关闭下拉菜单，并且如果我继续单击搜索框本身。我错过了什么道具吗？这是示例代码：

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Menu, Dropdown, Input } from "antd";

class OverlayVisible extends React.Component {
  state = {
    visible: false
  };

  handleMenuClick = (e) => {
    if (e.key === "3") {
      this.setState({ visible: false });
    }
  };

  handleVisibleChange = (flag) => {
    this.setState({ visible: flag });
  };

  render() {
    const menu = (
      <Menu onClick={this.handleMenuClick}>
        <Menu.Item key="1">Clicking me will not close the menu.</Menu.Item>
      </Menu>
    );
    return ( …

我正在使用react-hook-form并使用第三方DatePicker。由于它是一个自定义组件，因此将其用作受控组件来注册它。这很好用

<Controller
    control={control}
    name="reviewStartDate"
    render={({ field: { onChange, onBlur, value } }) => (
        <DatePicker
            className={`form-control ${errors.reviewStartDate ? 'is-invalid' : ''}`}
            customInput={<input />}
            wrapperClassName="datePicker"
            onChange={onChange}
            onBlur={onBlur}
            selected={value ? new Date(value) : ''}
            dateFormat='dd-MMM-yyyy'
        />
    )}
/>

同样/但是，我正在使用第三方Multiselect。这里的值没有被注册。它确实显示了选定的值，但是当我提交表单时，该值不存在于数据中。

<Controller
    control={control}
    name="rootCauseAnalysisCategory"
    render={({ field: { value } }) => (
        <Multiselect
            options={rootCauseAnalysisCategorys}
            isObject={false}
            showCheckbox={true}
            hidePlaceholder={true}
            closeOnSelect={false}
            selectedValues={value}
        />
    )}
/>

相似地

我们已经编写了 AWS Lambda 函数。例如，传递联系人 ID 并返回联系人的电话号码列表（以 json 格式）。

我们正在构建一个 Amplify-React 应用程序。我们想要调用现有的 Lambda 函数。Amplify React 应用程序和 Lambda 函数位于同一 AWS 账户和同一区域。

1. 我们可以直接在 Amplify-React 应用程序中调用 Lambda 函数吗？或者，我们必须先公开API网关中的Lambda函数？
2. 如果我们可以直接在 Amplify-React 中调用 Lambda 函数，您可以分享示例 javascript 来执行此操作吗？
3. 是否存在如何在 Amplify-React 应用程序中调用现有 Lambda 函数的最佳实践？

背景：我正在使用 Gatsby -> Netlify 将我们的销售页面迁移到无服务器 CDN，并尝试实现 Stripe 自定义支付流程，因为我们想要自定义结账表单。我在这里的一个登陆页面上实现了 Stripe Checkout，但这不是我们想要的。登陆页面

Stripe 的文档非常简单，但该文档假设正在运行一台服务器。

以下代码是其文档中的服务器实现片段。

const express = require("express");
const app = express();
// This is your real test secret API key.
const stripe = require("stripe")("sk_test_51J085aDDSnMNt7v1ZO3n5fxobP6hhEhf1uC2SDmkHGIX8fCnxFiSMrxITKu06ypYUHYAMHVZ1lhc5Fqm7UoVa6dx00XvV5PZzG");

app.use(express.static("."));
app.use(express.json());

const calculateOrderAmount = items => {
  // Replace this constant with a calculation of the order's amount
  // Calculate the order total on the server to prevent
  // people from directly manipulating the amount on the client
  return 1400;
};

app.post("/create-payment-intent", …

我已经将我的reactapp部署到netlify，后端api端点看起来http://31.64.97.124/apiusers请求在本地主机上工作正常，但是当我将我的前端部署到服务器时，在每个获取请求上它开始给出以下错误。

Mixed Content: The page at 'https://blissful-lamport-78c1f5.netlify.app/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://34.68.97.184/apiusers/login'. This request has been blocked; the content must be served over HTTPS.

这个问题有什么解决办法吗？

以下是我的代码：我需要在使用 videojs 的网页中添加质量选择器。我不确定如何使用这些插件，React 中没有任何插件示例。我插入插件的方式不起作用。请帮忙

视频

<script src="https://vjs.zencdn.net/7.6.6/video.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
    <script src="https://cdn.streamroot.io/videojs-hlsjs-plugin/1/stable/videojs-hlsjs-plugin.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-overlay/1.1.4/videojs-overlay.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
    <script src="../dist/silvermine-videojs-chromecast.min.js<?php echo "?".$version; ?>"></script>


                <div class="col-sm-6">
                    <div class="video-player1">
                        <video autoplay id="example-video" class="video-js vjs-theme-fantasy custom-videojs" controls>
                        </video>
                        <script>
                            var options = {
                                html5: {
                                    hlsjsConfig: {
                                        // Put your hls.js config here
                                    }
                                },
                                controls: true,
                                techOrder: [ 'chromecast', 'html5' ], // You may have more Tech, such as Flash or HLS
                                plugins: {
                                    chromecast: {}
                                }
                            };

                            // setup beforeinitialize hook …

我使用“npm link my-package”来重定向我的node_module。但我用“vite dev”运行失败。Vite 无法解析我的本地私有包。

Uncaught TypeError: Cannot set property 'my-package' of undefined.

但是，如果我使用 npm 服务器中的“npm i my-package”，它就可以工作。

操作系统：Windows