小编Aje*_*hah的帖子

我对如何在.attrs()TypeScript 中使用该函数感到有些困惑。说我有以下几点：

BottleBar.tsx：

interface IBottleComponentProps {
  fill?: boolean
}

const BottleComponent = styled.div.attrs<IBottleComponentProps>(({fill}) => ({
  style: {
    backgroundImage: `url("./media/images/${fill ? 'Bottle-Filled.png' : 'Bottle-Empty.png'")`
  }
}))<IBottleComponentProps`
  width: 20px;
  height: 20px;
`;

export default function BottleBar() {

  return (
    <Wrapper>
      <BottleComponent />
      <BottleComponent fill />
    </Wrapper>
  )
}

现在，上面的代码有效，但我不确定为什么IBottleComponentProps在开头和结尾都需要两次 - 没有它，我得到以下内容：

Type '{ fill: boolean; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, "slot" …

我使用 Redux 创建了一个 CRUD 应用程序，因此，我编写了代码，并在导出组件时添加了以下行：

AddContact.PropTypes = {
  addContact: PropTypes.func.isRequired
};

export default connect(null, { addContact })(AddContact);

但是，它显示了这个错误

./src/components/contact/AddContact.js
  Line 461:12:  Typo in static class property declaration  react/no-typos
Search for the keywords to learn more about each error.

我正在使用我继承的 Rails 应用程序。我正在尝试运行该npm install命令，但不断收到以下错误。我尝试npm rebuild node-sass按照输出中的建议运行，但没有帮助。我在Ubuntu 16和OS X上都遇到这个问题。

> cd client && npm install

npm WARN deprecated gulp-jscs@3.0.2: JSCS is deprecated. Switch to ESLint.
npm WARN deprecated why-did-you-update@0.0.8: Package no longer supported. Please use @welldone-software/why-did-you-render instead.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated jscs-preset-wikimedia@1.0.1: No longer maintained. We recomment migrating to ESLint with eslint-config-wikimedia.
npm …

我有一个对我的应用程序来说是全局的搜索组件，并在顶部显示搜索结果。一旦用户进行任何类型的导航，例如单击搜索结果或使用浏览器上的后退按钮，我想重置搜索：清除结果和搜索输入字段。

目前，我正在用 ; 处理这个问题Context。我有一个SearchContext.Provider广播该resetSearch函数的函数，无论我在哪里处理导航，我都有resetSearch在处理导航之前调用的消费者（我使用useHistory钩子以编程方式执行此操作）。

这不适用于浏览器控件上的后退按钮按下（因为这是我无法控制的）。

在渲染（或发生任何浏览器导航）之前是否有一个中间步骤Routes可以挂钩，以确保resetSearch调用我的函数？

根据要求，代码如下：

// App.js
const [query, setQuery] = useState("");
const [results, setResults] = useState([]);

const resetSearch = () => {
    setResults([]);
    setQuery("");
};

<SearchContext.Provider value={{ resetSearch }}>
    // all of my <Route /> components in this block
</SearchContext.Provider>

// BusRoute.js
const { resetSearch } = useContext(SearchContext);

const handleClick = stop => {
    resetSearch();
    history.push(`/stops/${stop}`);
};

return (
    // some …

当我在 herokuy 上上传我的网站后，图像无法正常工作，它给了我这个错误

拒绝加载图像“”，因为它违反了以下内容安全策略指令：“img-src'self'数据：”。

我尝试过类似的事情

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src data:" />

但它也不起作用

我尝试过创建一个界面，安装反应类型，唯一有效的方法是当我将代码放入 JavaScript 中但在 TS 项目中时，它给了我错误：

“ServerResponse”类型上不存在属性“status”（TS2339）

这是代码：

import multer from 'multer';
import nc from "next-connect";


const upload = multer({
  storage: multer.diskStorage({
    destination: './public/uploads',
    filename: (req, file, cb) => cb(null, file.originalname),
  }),
});

const apiRoute = nc({
  onError(error, req, res) {
    res.status(501).json({ error: `Sorry something Happened! ${error.message}` });
  },
  onNoMatch(req, res) {
    res.status(405).json({ error: `Method '${req.method}' Not Allowed` });
  },
});

apiRoute.use(upload.array('theFiles'));

apiRoute.post((req, res) => {
  res.status(200).json({ data: 'success' });
});

export default apiRoute;

export const config = {
  api: { …

我试图设置从服务器获取数据时的默认值Datepicker，但它不起作用。按照此处的文档，我无法设置defaultValue道具，因为它仅用于第一次渲染。

我发现一个解决方案是创建一个状态并在Datepicker更改时更新该状态。但这似乎很愚蠢，因为它会重新渲染每次更新。请让我知道一个“更好的解决方案”或使用react-hook-form值的“状态”。这是我目前的“愚蠢的解决方案”：

import { DatePicker, Form } from "antd";
import moment, { Moment } from "moment";
import { useEffect, useState } from "react";
import {
  Controller,
  ControllerRenderProps,
  SubmitHandler,
  useForm,
} from "react-hook-form";

const UserList = () => {
  const [date, setDate] = useState<Moment | null>();
  const dateFormat = "YYYY-MM-DD";
  useEffect(() => {
    setDate(() => moment("1963-10-14T00:00:00"));
  }, []);

  const onChange = (date: Moment | null, dateString: string) => {
    console.log(date, dateString);
  }; …

我开发了一个以 API 21 作为目标 SDK 版本的 Android 应用程序。

它会在它上面的 API 上正常运行吗，例如 API 23？

如何使用下面没有和属性的 JSON 数据填充反应选择中的选项？valuelabel

[       
    {
        "sortCode": "55-77-42",
        "accountNumber": "08488234",
        "accountType": "Savings Account",
        "accountName": "Mannuel Sam"
    },
    {
        "sortCode": "12-43-98",
        "accountNumber": "12365432",
        "accountType": "Savings Account",
        "accountName": "John Cena"
    },
    {
        "sortCode": "87-20-51",
        "accountNumber": "76491234",
        "accountType": "Savings Account",
        "accountName": "Shweta Pandey"
    },
    {
        "sortCode": "56-73-39",
        "accountNumber": "09865479",
        "accountType": "Savings Account",
        "accountName": "Prerna Singh"
    }
]

在使用ant design v4Form时，我在使用inside时遇到困难。CheckBoxForm.Item

const [form] = useForm();

useEffect(() => {
    form.setFieldsValue({
        title: '',
        billable: false,
    })
}, []);

const onFieldsChange = (changedFields, allFields) => {
    console.log('onFieldsChange.changedFields => ', changedFields);
    console.log('onFieldsChange.allFields=> ', allFields);
}

return (
    <Form form={form} onFieldsChange={onFieldsChange}>
        <Form.Item label="title" name="title">
            <Input />
        </Form.Item>
        <Form.Item label="Billable" name="billable">
            <CheckBox />
        </Form.Item>
    </Form>
);