我打算使用react-image-annotate通过绘制多边形来注释图像。但react-image-annotate默认情况下只允许从预定义列表中选择一个分类。

我想要类似这个库react-image-annotation 的东西，您可以在其中绘制一个边界框，并显示一个您可以在其中输入自定义文本的字段。

文档说可以使用 构建自定义表单RegionEditLabel，但没有明确的文档。

我正在处理 Buefy 输入字段并寻找一种方法来告诉我任何表单字段是否有任何错误。快速输入文档

<b-field horizontal label="Title">
  <b-input
    v-model="model.title"
    name="title"
    type="text"
    minlength="10"
    required>
  </b-input>
</b-field>

<b-field horizontal label="Description">
  <b-input
    v-model="model.description"
    name="description"
    type="textarea">
  </b-input>
</b-field>

如果没有可用的方法，那么我们如何编写自定义方法来确定它。这将有助于在其他用例中禁用提交方法等。

如何使用 select、react-dropzone 将一个或多个文件及其描述添加到组件的状态中。

我正在使用 Reactjs、dropzone 和 bootstrap，我想要实现的是：添加一个或多个文件（通过将它们拖动到某个区域），然后查看已添加文件的列表以及每个文件的选择输入（以及用户定义“类型”）将所有这些保存在一个状态中，然后将该信息发送到 API。类似于图像中出现的内容：

到目前为止，我拥有的代码返回了接受的文件列表，具体取决于其扩展名（pdf、xlsx ...）和拒绝的文件，但我不知道如何添加选择（带有选项） “类型”来自文件，可以是“摘要”、“报告”、“测试”...）并将其保存在状态中，然后将其发送到 API。

到目前为止，我使用react-dropzone的代码是这样的：

const baseStyle = {
  flex: 1,
  display: "flex",
  flexDirection: "column",
  alignItems: "center",
  padding: "20px",
  borderWidth: 2,
  borderRadius: 20,
  borderColor: "#26C2E7",
  borderStyle: "dashed",
  backgroundColor: "#fafafa",
  color: "#c4c4c4",
  outline: "none",
  transition: "border .24s ease-in-out"
};

const activeStyle = {
  borderColor: "#f2f"
};

const acceptStyle = {
  borderColor: "#f8f"
};

const rejectStyle = {
  borderColor: "#f2f"
};
function InputFiles(props) {
  const {
    acceptedFiles,
    fileRejections,
    isDragActive,
    isDragAccept,
    isDragReject,
    getRootProps, …

我想创建一个材质 ui 轮播，在同一行中有 3 个可见项目。当缩小浏览器的宽度时，我希望这些项目仍位于一行中，并隐藏那些不适合的项目。

这是全屏时：

这就是我想要的：

但这就是我得到的：

你对我做错了什么有什么想法吗？这是我的代码：

  <Paper variant="outlined" className={classes.paper}>
    <Grid
      container
      spacing={2}
      className={classes.grid}
      alignItems="center"
      justify="center"
    >
      ...
      <Box display="flex" alignItems="center" className={classes.box}>
        <Grid item xs="auto" className={classes.arrow}>
          ...Left Arrow...
        </Grid>
        <Grid item>
          <Grid
            container
            spacing={2}
            className={classes.grid}
            alignItems="center"
            justify="center"
          >
            <Grid item xs="auto">
              <UserCard content={users[index]} />
            </Grid>
            <Hidden xsDown>
              <Grid item xs="auto">
                <UserCard content={users[index + 1]} />
              </Grid>
            </Hidden>
            <Hidden smDown>
              <Grid item xs="auto">
                <UserCard content={users[index + 2]} />
              </Grid>
            </Hidden>
          </Grid>
        </Grid>
        <Grid item xs="auto" className={classes.arrow}>
          ...Right Arrow...
        </Grid> …

我正在尝试根据下拉值选择来验证 redux-form，下面是代码和错误。

我得到Uncaught Error: Maximum update depth exceeded.当组件在componentWillUpdate或 中重复调用 setState 时可能会发生这种情况componentDidUpdate。React 限制嵌套更新的数量以防止无限循环。

请帮助我并提前致谢

    ...
      <Field
        id="user-form-email"
        name="email"
        component={emailField}
        className={style.inputField}
        fullWidth
        label={i18n({ id: "users.email" })}
        validate={[emailRequiredForAdmin("role")]}
        disabled={selectedRole === "manager"}
      />

      <Field
        id="user-form-roles"
        name="role"
        component={userRoleSelectField}
        className={style.inputField}
        fullWidth={true}
        items={getRoles(intl)}
        label={i18n({ id: "users.role" })}
        onChange={(event) => {
          if (event.target.value == "user") {
            this.props.change("password", "");
            this.props.change("confirmPassword", "");
          }
        }}
      />
    ...

// Decorate with redux-form

UsersForm = reduxForm({
  form: formNames.USER,
})(UsersForm);

const selector = formValueSelector(formNames.USER);

UsersForm = connect((state) => …

我正在尝试下载来自 api 调用的分割 zip 文件（.zip、.z01、.z02）等。在 Javascript 中，我想即时下载这些文件并创建一个组合的 .zip 文件，然后保存解压缩的文件。（我不需要创建组合 zip）我只需要 test.pdf 文件，该文件已被拆分为多个 zip。我想下载那个pdf文件。

例如 test.pdf (18 mb) 被分成 (.zip 10mb) 和 (.z01 8mb) 两个 zip 文件。目前我正在将它们下载为 blob，然后将它们合并。生成的 zip 已损坏。下面是我试过的代码。

Promise.all([
  axios.get(`https://testapi.com/folder/file.zip`, {
    responseType: "blob",
    headers: {
      Accept: "application/json",
    },
  }),
  axios.get(`https://testapi.com/folder/file.z01`, {
    responseType: "blob",
    headers: {
      Accept: "application/json",
    },
  }),
]).then((obj) => {
  let blob: any = [];
  obj.forEach((e: any) => {
    blob.push(e.data);
  });
  const newBlob = new Blob(blob, { type: "octet/stream" });
  saveAs(newBlob, "zip.zip"); // but it's currupted
});

一个非常简单的视图：

import React from "react";
import { View } from "react-native";

export default function App() {
  return (
    <View
      onLayout={(layout) => {
        console.log(layout.nativeEvent);
      }}
      style={{
        width: 371,
        height: 477,
      }}
    ></View>
  );
}

所以我只是制作一个宽度=371和高度=477 的视图，然后记录其布局。当我在实际的 iPhone 5s 设备上使用 expo 运行此命令时，我得到以下输出：

import React from "react";
import { View } from "react-native";

export default function App() {
  return (
    <View
      onLayout={(layout) => {
        console.log(layout.nativeEvent);
      }}
      style={{
        width: 371,
        height: 477,
      }}
    ></View>
  );
}

哪个是对的。但是当我在屏幕尺寸为 1080x1920:420dpi 的 Android …

在 Nestjs graphql 中使用代码优先方法时，如何获得允许可为空值的数组类型字段。

该示例表明

  @Field(type => [String])
  ingredients: string[];

[String!]!文件中生成schema.gql。我怎样才能得到公正[String]？使用{nullable: true}给了我[String!]

我希望在装饰器中找到某种类型的实用程序或参数@Field，但似乎并非如此

我有一个自定义挂钩，如下所示

export const useUserSearch = () => {
  const [options, setOptions] = useState([]);
  const [searchString, setSearchString] = useState("");
  const [userSearch] = useUserSearchMutation();
  useEffect(() => {
    if (searchString.trim().length > 3) {
      const searchParams = {
        orgId: "1",
        userId: "1",
        searchQuery: searchString.trim(),
      };
      userSearch(searchParams)
        .then((data) => {
          setOptions(data);
        })
        .catch((err) => {
          setOptions([]);
          console.log("error", err);
        });
    }
  }, [searchString, userSearch]);
  return {
    options,
    setSearchString,
  };
};

我想测试这个钩子，但无法模拟userSearch在 useEffect 内部调用的函数。有人可以帮忙吗？这是我的测试

it('should set state and test function', async () => {
    const …

我正在尝试使用 React 和react-dropzone创建多重上传拖放。一切都很好，除了我似乎无法获取上传的进度信息，即使我正在使用onUploadProgress。

这是我正在使用的代码：

const onDrop = useCallback((acceptedFiles) => {
  acceptedFiles.forEach((file) => {
    let response = axios.put(`/api/files-endpoint`, file, {
      onUploadProgress: (progressEvent) => {
        console.log(`progress ${progressEvent}`);
      },
    });
  });

  setFiles(acceptedFiles);
}, []);

难道我做错了什么？在浏览器中，我尝试使用 Firefox 和 Chrome，甚至将连接限制为慢速 3G，看看它是否会在这些情况下触发该条件，但仍然没有运气。任何帮助表示赞赏。

我有两个异步表单字段。根据第一个字段的选择，第二个字段通过 loadOptions 函数获取数据。我观察到，随着第一个字段中的输入更改，第二个字段的 loadOptions 不会重新执行。如何解决这个问题？

反应选择

import React, { useState, useEffect } from 'react'
import { useHistory } from 'react-router-dom'
import { useApolloClient} from 'react-apollo';
import { Formik, Form, ErrorMessage } from 'formik';
import * as Yup from "yup";
import AsyncSelect from 'react-select/async'
import AsyncPaginate from 'react-select-async-paginate'
import { GET_ITEM_CODES, GET_ITEMCODE_SPECIFICATIONS } from '../../library/Query';

export default function SampleForm({initialData}){
const history = useHistory();

const [productFilter, setProductFilter] = useState('');

const client = useApolloClient();

const defaultAdditional = {
    cursor : null
}
const …

所以我尝试根据用户输入选择行，如下所示：

db.all(
  'SELECT * FROM houses WHERE location LIKE "%$input%"',
  {
    $input: name,
  },
  (error, rows) => {
    res.send(rows);
  }
);

但是，数据库以未定义的值进行响应。我能做些什么？

为什么我们在比较器之前使用 new 关键字，同时将其用作排序的构造函数，因为比较器是一个接口，因此我们无法实例化它？

Collections.sort(persons, new Comparator<Person>() {
  @Override
  public int compare(Person p1, Person p2) {
      return p1.getAge() - p2.getAge();
  }
});