我有一个文本输入。如果我点击页面中的特定按钮，我想重置输入的值。这是我的代码：
const inputRef = useRef()
const handleClick= () => {
inputRef.current.value.reset();
return "hello world"
}
return (
<>
<input type="text" ref={inputRef}/>
<button onClick={()=> handleClick}>delete all</button>
</>
)它不起作用。如何解决这个问题？
create-react app感谢命令，我已在应用程序中安装了故事书npx -p @storybook/cli sb init。然后，我将一个基本故事添加到故事文件夹中。启动故事书时，它崩溃并显示：typeError: args.flat is not a function
这是我的故事：
import React from "react";
import Hello from "./components/Hello";
import faker from "faker";
const text = faker.internet.email();
export const Default = () => {
return <Hello text={text} />;
};和配置：
module.exports = {
stories: ['../src/**/*.stories.js'],
addons: [
'@storybook/preset-create-react-app',
'@storybook/addon-actions',
'@storybook/addon-links',
],
};我尝试用自定义配置替换它：
import { configure } from "@storybook/react";
function loadStories() {
const req = require.context("../src/stories", true, /\.stories\.js$/);
req.keys().forEach((filename) => req(filename));
}
configure(loadStories, module);如何解决这个问题？
我需要用大量国家/地区列表填充选择输入。由于国际化，我为每种可用语言都有一个单独的 json 文件。为了不将它们全部加载到我的组件中，我想只导入与当前区域设置相对应的组件。
这是我写的：
function MyComponent() {
const [countries, setCountries] = useState([]);
const { locale } = useLocale();
useEffect(() => {
import(`../../data/countries/${locale}.json`)
.then((res) => setCountries(res.countries))
.catch(_ => null);
}, []);
return <Select options={countries}/>
}我还考虑过在单独的文件中编写自己的钩子：
export const useFetchJSON = (file: string) => {
const [data, setData] = useState({});
const { locale } = useLocale();
const res = require(`../data/${file}/${locale}.json`);
setData(res);
return data;
};这些技术都不起作用。如何解决这个问题？谢谢！
我有一个非常基本的应用程序，可以获取用户并允许更改他的名字。我使用 React 查询获取用户，这样我就可以从缓存功能中受益。有用。
但是，当我想更新用户时，我使用 axios 的经典 post 请求。一旦用户在数据库中更新，我需要直接在 updateUser() 函数中更新缓存。我在网上看到过使用 queryCache.setCache 的教程，但它在这里不起作用。如何解决这个问题？或者也许有更好的方法来处理此类查询？
另外，我注意到大量的渲染...（请参阅应用程序文件中的“用户渲染”console.log）。
为了方便起见，我使用 pokeapi 在codesandbox 上制作了一个小脚本：
https://codesandbox.io/s/api-service-syxl8?file=/src/App.js:295-306
任何帮助将不胜感激！
我有一个 webpack ，由于代码分割而main.bundle.js具有重量，但我的是. 当用户第一次访问该网站时，他必须下载太大的文件。287kbvendor.js5mb5.2mb
拆分供应商的正确方法是什么，以便用户只下载运行页面所需的包，然后 webpack 在后台预取所有剩余的包？
我正在使用 webpack 4（我正在等待 Storybook 支持 webpack 5，然后再升级。如果 W5 有新的方法，请告诉我）。
这是我的配置：
/* eslint-env node */
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const Dotenv = require("dotenv-webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const isProductionMode = (mode) => mode === "production";
module.exports = () => {
const env = require("dotenv").config({ path: __dirname + "/.env" });
const nodeEnv = env.parsed.NODE_ENV;
return {
mode: "development",
entry: "./src/index.tsx",
output: {
path: path.join(__dirname, "./dist"), …我在 React 应用程序中使用框架运动。最新版本 - 4.1.13 - 破坏了我的用户界面。我需要降级到以前的版本 - 4.1.2 - （是的，版本控制看起来很奇怪，但 4.1.2 实际上早于 4.1.13，请参阅https://www.npmjs.com/package/framer-motion） 。
我运行命令yarn upgrade framer-motion@^4.1.2。在 中package.json，包变为4.1.2，但在 中yarn.lock，包的版本仍然是4.1.13：
framer-motion@^4.1.2:
version "4.1.13"
resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-4.1.13.tgz#0a7f096113a0f80f11116c1a73da9b81523324cd"
integrity sha512-E72PyzHXsie1IGcEFMGM3OJsVbtmpS8vcnDjh6tdeCaP7stoioZpmKZcx7c87giymAyuSSWvsGGdVnDGRzRX6g==
dependencies:
framesync "5.3.0"
hey-listen "^1.0.8"
popmotion "9.3.5"
style-value-types "4.1.4"
tslib "^2.1.0"
optionalDependencies:
"@emotion/is-prop-valid" "^0.8.2"我当然做了一个rm -rf node_modules && yarn。它不会改变任何东西。
我想使用一个基于 D3 的 React 组件，称为react-wordcloud. 它在 React 中运行良好，但会使 Nextjs 崩溃并出现以下错误：
服务器错误错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：对象。
根据几篇文章，我尝试编写了以下解决方法：
// WORKAROUND 1
{typeof window === "undefined" ?
<div>loading...</div>) :
<WordCloud words={words} />
}
// WORKAROUND 2
{process.browser && <WordCloud words={words} />}
// WORKAROUND 3
{process.browser &&
<div suppressHydrationWarning>
<WordCloud words={words} />
</div>
}
// WORKAROUND 4
<div suppressHydrationWarning>
<WordCloud words={words} />
</div>它们都不起作用。构建不断崩溃。有什么解决方案可以强制 NextJS 显示客户端组件吗？
我有一个猫鼬模式，其中包含一个对象数组和一个字符串数组。在这两种情况下，如何设置验证器以将可以插入的项目数量限制为 10 个？
todoList: [{ type: String }],
pictures: [{ type: String }],我使用压缩库来压缩我所有的快速响应。不幸的是，似乎没有任何响应被压缩。然而，我在客户端调用标头中指定了接受编码：“gzip”。这是代码：
正面：
export const api = ax.create({
baseURL: "http://localhost:8000",
timeout: 1000,
withCredentials: true,
headers: {
'Accept-Encoding': 'gzip',
}
});
const contact = () => {
api.get("/contact")
.then(res=> console.log("contact response", res))
.catch(err=> console.log("contact err", err))
}后退：
const app = require("express")();
const cors = require("cors");
const compression = require("compression")
app.use(cors({ credentials: true, origin: ["http://localhost:3000"] }));
app.use(compression());
app.get('/contact', (req, res) => {
res.status(200).json({hello: "world"})
})在 Chrome 网络选项卡中，我没有内容编码：gzip。如何解决这个问题？
我生成了一个数字数组。我想删除重复项。在 javascript 中，我可以使用[...new Set(arr)]并完成工作。
在 Rust 中，到目前为止我还没有找到实现这一目标的简单方法。
我写过：
use rand::{thread_rng, Rng};
use itertools::Itertools;
fn main() {
let mut arr:Vec<u8> = Vec::new();
for _ in 0..10 {
arr.push(thread_rng().gen_range(0..10))
}
println!("random {:?}", arr);
arr.iter().unique();
println!("unique {:?}", arr);
}
输出是：
random [7, 0, 3, 6, 7, 7, 1, 1, 8, 6]
unique [7, 0, 3, 6, 7, 7, 1, 1, 8, 6]
所以我试图在另一个变量中获得“无重复”结果：
random [7, 0, 3, 6, 7, 7, 1, 1, 8, 6]
unique [7, 0, 3, 6, 7, 7, …reactjs ×7
express ×2
javascript ×2
node.js ×2
arrays ×1
async-await ×1
asynchronous ×1
compression ×1
d3.js ×1
import ×1
json ×1
mongodb ×1
mongoose ×1
next.js ×1
npm ×1
package.json ×1
react-query ×1
rust ×1
sorting ×1
storybook ×1
vector ×1
webpack ×1
yarnpkg ×1