小编Kam*_*ran的帖子

我创建了带有formik的表单以进行表单验证。我使用了组件Formik，Form，Field form formik并对其进行了配置：

    import { Formik, Form, Field } from "formik";
    import { object, string } from "yup";
    import isEmpty from "lodash/isEmpty";
    import FormikSelectInput from "../common/FormikSelectInput";

    class App extends Component {
      render() {
        const options = this.props.categories.map(c => {
          return { label: c.name, value: c.name };
        });

        return (
          <Formik
            validationSchema={object().shape({
              category: string().required("Category is required.")
            })}
            initialValues={this.props.obj}
            onSubmit={(values, actions) => {
              console.log(values);
            }}
            render={({ errors, dirty, isSubmitting, setFieldValue }) => (
              <Form>
                <Field
                  name="category"
                  label="Categories"
                  value={this.props.obj.category.name}
                  options={options}
                  component={FormikSelectInput}
                />
                <button …

我有以下组件可以制作表单并使用 formik 进行表单验证，并且有一个使用 react-places-autocomplete 创建的自定义输入字段，用于在表单中输入地址。表单工作正常，但是即使地址字段是必需的，验证也没有显示，当我将其清空时，formik 的错误验证没有显示。

下面是组件的代码：

//FormikErrorLabel component

import React from 'react';

const FormikErrorLabel = ({ error, children, ...props }) => {
    return <label {...props}>{children}</label>
}
export default FormikErrorLabel;

//FormikErrorLabel component

import React from 'react';

const FormikInputFeedback = ({ children }) => (
    <span className="text-danger">{children}</span>
)

export default FormikInputFeedback;

//FormikPlacesAutoComplete custom input places auto complete component with formik validation

import React, { Component } from "react";
    import classnames from "classnames";
    import FormikErrorLabel from "./FormikErrorLabel";
    import FormikInputFeedback from "./FormikInputFeedback";
    import …

我想用react-testing-library测试我的api 并且我从一个名为 apiClient.ts 的文件中导出由 axios.create 创建的实例

import axios from 'axios'

const apiClient = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
  responseType: 'json',
  headers: {
    'Content-Type': 'application/json',
  },
})

export default apiClient

然后在 users.ts fetchUsersApi 中使用我从 apiClient 获取的 axios 实例

import apiClient from './apiClient'

export interface ITrader {
  id: number
  name: string
  username: string
  email: string
  address: any
  phone: string
  website: string
  company: any
}

export const fetchTradersApi = async (): Promise<ITrader[]> => {
  const response = await apiClient.get<ITrader[]>('/users')
  return response.data
}

我创建了一个 …

如何避免“您在此页面上多次包含 Google Maps JavaScript API。这可能会导致意外错误。” 如果我使用 google-map-react 在另一个组件中显示地图和 react-places-autocomplete 来获取地址和坐标？

//LocationMapPage  component that displays the map box and pass the props to it
class LocationMapPage extends Component {

  render() {
    let {latLng,name,address} = this.props.location;
    return (
        <MapBox lat={latLng.lat} lng={latLng.lng} name={name} address={address}/>
    )
  }

}

//MapBox component
import React from "react";
import GoogleMapReact from 'google-map-react';
import apiKey from "../../configureMap";


const Marker = () => <i className="fa fa-map-marker fa-2x text-danger" />

const MapBox = ({lat,lng, name, address}) => {
    const center = …