我想使用 react-query 的useInfiniteQuery. 一切似乎都很清楚，但分页部分。
文档示例是：
export default () => {
const {
status,
data,
error,
isFetching,
isFetchingMore,
fetchMore,
canFetchMore,
} = useInfiniteQuery(
'projects',
async (key, nextId = 0) => {
const { data } = await axios.get('/api/projects?cursor=' + nextId)
return data
},
{
getFetchMore: lastGroup => lastGroup.nextId,
}
)我明白它的作用。projects是查询的 id，用于缓存，然后是执行 api 调用的函数。现在nextId变量呢？它从零开始，因此后端将知道它必须只返回从 0 到 x 的结果（顺便说一下，我们也可以传递动态限制吗？）。但是当fetchMore()- 再次触发查询的函数 - 被调用时，究竟如何useInfiniteQuery知道它应该增加nextId？
我有一个上传器，允许用户上传多张图片。为了只创建或更新他想要添加/更改的图像，我更新了一个如下所示的对象：
{main: Blob, "1": Blob, "2":Blob}
所以如果以后只需要更新“1”，发送的对象将只包含
{"1": Blob}
单击保存时，它会触发一个函数，该函数应该将图像附加到 formData()。遗憾的是 formData 永远不会更新。我有以下错误：
无法在“FormData”上执行“append”：参数 2 的类型不是“Blob”。
export async function uploadImages(files, userId) {
try {
const images = new FormData();
files.main && images.append("image", files.main, "main");
files[1] && images.append("image", files[1], "1");
files[2] && images.append("image", files[2], "2");
const res = await ax.post(process.env.SERVER_URL + "/upload-images", {
images,
userId,
});
return "success"
} catch (err) {
return "error"
}
}如何解决这个问题？谢谢！
使用 moment.js，您可以通过以下方式格式化日期：
const date = moment("2010-10-22T21:38:00");
const data = date.format("LL - LT")
console.log(data)<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js" integrity="sha512-Izh34nqeeR7/nwthfeE0SI3c8uhFSnqxV0sI9TvTcXiFJkMd6fB644O64BRq2P/LA/+7eRvCw4GmLsXksyTHBg==" crossorigin="anonymous"></script>如何用 Luxon 做同样的事情？我试过了：
const date = luxon.DateTime.fromISO("2010-10-22T21:38:00" );
const data = luxon.DateTime.fromFormat(date, "DATETIME_SHORT")
// output => script error<script src="https://cdn.jsdelivr.net/npm/luxon@1.25.0/build/global/luxon.min.js"></script>我有一个自定义的 React + Typescript + Webpack 项目。我需要导入一个简单的 .svg 文件并在组件中使用它。Typescript 声称：
找不到模块
我已经安装了 svgr，将其添加到我的 webpack 配置中，创建了一个 custom.d.ts 文件，允许在 typescript 中导入 svg 并在 tsconfig.json 中指定它。没有任何效果（我暂时在 Storybook 中运行该组件）。
这是我的网页包：
module: {
rules: [
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: { loader: "babel-loader" },
},
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
{ test: /\.svg$/, use: ["@svgr/webpack"] },
{ test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"] },
],
},我的组件
import React, { useEffect } from "react";
import Account from "./account.svg";
export default function Icon({ icon }) …我使用react-query 的useMutation 挂钩将用户添加到api。有用。现在，我需要将新用户添加到我的用户数组中，该数组位于我的状态中。
我知道我应该使用 useQuery 查询所有用户，然后使用 useMutation 中的 onSuccess 来修改缓存。但在某些情况下，我不会使用 useQuery 获取用户，因此我需要更新本地状态，就像处理正常的 Promise 一样。
目前，我只是检查 prop“success” 是否为 true，如果是，则更新数组。但它仅在第二次单击时有效。为什么以及如何解决这个问题？
看来 onAddUser() 内的成功条件只有在第二次单击时才能达到。
export default function App() {
const { updateUser } = userService();
const { update, loading, error, data, success } = updateUser();
const [users, setUsers] = useState(allUsers);
const onAddUser = async () => {
await update(newUser);
if (success) {
return setUsers((users) => [...users, data]);
}
};
return (
<>
<div>
{users.map((user) => (
<div key={user.id}>
{user.name} - {user.job}
</div>
))} …我想在useQuery请求成功后设置 24 小时缓存。
但是当我刷新页面时，缓存就消失了。我看到它是因为每次在我的服务器上命中该路由时，我都会 console.log 一条消息。
如何防止这种行为并实现真正的缓存？
这是代码：
import { useQuery } from "react-query";
import { api } from "./config";
const _getUser = async () => {
try {
const res = api.get("/get-user");
return res;
} catch (err) {
return err;
}
};
export const getUser = () => {
const { data } = useQuery("contact", () => _getUser(), {
cacheTime: 1000 * 60 * 60 * 24,
});
return { user: data && data.data };
};
// …我有一个运行良好的 Expo 应用程序。现在，我想在将其发布到 Play 商店之前添加一些广告，以便赚点钱。Expo 说他们的内部广告包已被弃用，我必须使用react-native-google-mobile-ads.
因为react-native-google-mobile-ads是本机包，这意味着我需要执行特殊任务，并且不太清楚如何从这里继续。
据我了解，我需要：
安装expo-dev-client并react-native-google-mobile-ads
添加react-native-google-mobile-ads在 app.json 的expo plugin
"expo": { "plugins": ["react-native-google-mobile-ads"]}app.json"react-native-google-mobile-ads": {
"android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
"ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
}在我的终端上创建一个帐户https://expo.dev并运行eas login
然后run eas build --profile development --platform android生成一个构建
由于 expo-go 由于本机软件包而不再工作，我将无法在真正的手机上运行该应用程序。我必须通过运行expo start --dev-client并按在 Android 模拟器上a打开应用程序来完成 Android 模拟器上的开发。
然后添加代码以显示广告。
完成后，运行eas build --platform android以创建构建
按照漫长的流程将我的第一个版本上传到 Play 管理中心
将其发布为测试版应用程序，将链接发送至 adMob 审核。
一旦 …
如何在 Webpack 5 中允许节点 setImmediate？文档说我可以在节点对象中将此属性设置为 true，但构建崩溃，声称配置对象与 API 架构不匹配。
我的代码是：
node: {
global: true,
__filename: false,
__dirname: false
// setImmediate: true (here commented, because it crashes otherwise)
},我想在反应三纤维画布中插入一个 jsx 组件。有办法做到吗？
我已经分叉了一个官方示例，它具有无限滚动功能。每个元素都是来自 的图像@react-three/drei。假设我有一组组件。我如何放置它们才能达到相同的效果？
代码是：
import { Suspense, useRef } from 'react'
import { Canvas, useThree } from '@react-three/fiber'
import { ScrollControls, Scroll, Preload, Image as ImageImpl } from '@react-three/drei'
function Image(props) {
const ref = useRef()
const group = useRef()
return (
<group ref={group}>
<ImageImpl ref={ref} {...props} />
</group>
)
}
function Card() {
return (
<div style={{ background: '#red', width: 200, height: '100%', borderRadius: 8 }}>
<h3>hello world</h3>
<p>great text here!</p>
</div>
)
}
function …我正在尝试在传单地图上使用 MarkerClusterGroup。我有错误L.MarkerClusterGroup is not a function。我已阅读相关主题，但它们仅对 leaflet 1.7 以下的版本有效。
我正在使用 React 和 webpack。
import { Icon, Marker, Circle, LatLngBounds, Popup, DivIcon } from "leaflet";
import "leaflet.markercluster";
const divIcon = new DivIcon();
const markersCluster = L.MarkerClusterGroup({
chunkedLoading: true,
iconCreateFunction: function (cluster) {
return divIcon({
html: cluster.getChildCount(),
className: "mycluster",
iconSize: null,
});
},
});我还尝试过L全局导入：
import * as L from "leaflet";
import "leaflet.markercluster";
const divIcon = new L.DivIcon();
const markersCluster = L.MarkerClusterGroup({
chunkedLoading: true,
iconCreateFunction: function (cluster) { …reactjs ×5
javascript ×2
react-query ×2
webpack ×2
canvas ×1
date ×1
expo ×1
file-upload ×1
form-data ×1
import ×1
leaflet ×1
luxon ×1
react-native ×1
svg ×1
three.js ×1
typescript ×1