在 React 18 Strict 模式下，useEffect 运行两次，因此在没有解决方法的情况下在 useEffect 中获取数据并不好。我观看了一些视频，阅读了一些文章，说我们不应该在这个钩子中获取数据，但是我还没有看到有关如何正确执行此操作的实际示例。这就是我在 React 17 上的做法：
{
itens: [],
loading: false,
error: null,
async fetchItens(page: number) {
try {
set({
loading: true,
error: null
});
const { data } = await axios.get(`my-url`);
set({
loading: false,
itens: data,
})
} catch(err) {
set({
error: "There was an error.",
loading: false,
})
}
}
}
在我的组件中，我这样称呼它：
function MyComponent() {
const itens = useStore(state => state.itens);
const loading = useStore(state => state.loading);
const error = …我正在开发一个组件，我从 URL 读取查询参数并在 useEffect 中发布请求，由于严格模式，这会执行两次。该请求是非幂等的，处理这种情况的最佳方法是什么？
我正在考虑维护一个包含请求是否已执行的引用，如果请求已执行则不执行该请求。
我在反应测试库中使用 rerender 和 renderHook 。最近将 React 版本升级到 18。在其中一个测试用例中出现以下错误。
console.error 警告：ReactDOM.render 在 React 18 中不再支持。请改用 createRoot。在您切换到新 API 之前，您的应用程序的行为就像运行 React 17 一样。了解更多信息：https ://reactjs.org/link/switch-to-createroot
重新渲染（）；renderHook(() => abc());
因为，我不使用渲染，为什么警告将重新渲染和 renderHook 指向渲染。
您能指出如何进一步挖掘这个问题吗？
我有一个简单的主从场景，在左侧，我使用useSwrREST 服务加载城市列表，然后在右侧，我有一个城市详细信息窗口，也用于useSwr加载单个城市（通过单击左，或第一次加载）。
useSwr在下面的代码中，我调用 useEffect 函数，然后使用从状态设置调用 (setSelectedCityId) 中检索的数据。
这是可行的，并且始终存在与城市数组相关的数据，但我想知道是否可以保证 useEffect 的函数将在 Suspense Promise 完成后运行（就像看起来那样）。
这是我的简单代码：
import { Suspense, useEffect, useState, useTransition } from "react";
import useSwr from "swr";
const fetcher = (...args) => fetch(...args).then((res) => res.json());
function CityDetailFallback() {
return <div>Loading (CityDetail)</div>;
}
function CityDetail({ selectedCityId }) {
function CityDetailUI({ selectedCityId }) {
const { data: city } = useSwr(
selectedCityId
? `http://localhost:3000/api/city/${selectedCityId}`
: null,
fetcher,
{
suspense: true,
}
);
if (!city) {
return <div>loading …我之前使用过react-notifications-component（npm）并且运行良好。但最近我尝试用 React 18 安装它，但出现了这个错误：
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: code-challenge-front@0.1.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR! react@"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.1" from react-notifications-component@3.4.1
npm ERR! node_modules/react-notifications-component
npm ERR! react-notifications-component@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command …错误：React Hook“useId”无法在回调内调用。React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用。那么问题来了，我们在哪里可以使用 useId() 呢？我还使用代码为映射的 div 获得了相同的 id：
// @ts-ignore
import React, {useRef, useState, useId} from 'react';
interface InputLocationProps {
cleanAddress(): void
}
export const InputLocation: React.FC<InputLocationProps> = ({cleanAddress}) => {
const id = useId()
const ref = useRef<HTMLInputElement>(null);
const [text, setText] = useState<string>('');
const [textArray, setTextArray] = useState<string[]>(['more']);
const changeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
setText(event.target.value)
}
const putTextInArray = (puttingText: string) => {
setTextArray(prevState => [ ...prevState, puttingText])
}
const keyPressHandler = …我在我的项目中使用 React-18.2.0 并收到以下错误
Uncaught Error: createRoot(...): Target container is not a DOM element.
我已经尝试了大部分上传到互联网的可能解决方案，但不幸的是它没有帮助。
main.js 文件是：
Uncaught Error: createRoot(...): Target container is not a DOM element.
在 html 中，我有这个：
import React from 'react';
import { createRoot } from 'react-dom/client';
// eslint-disable-next-line no-unused-vars
const User = (props) => {
const {control, getValues, setValue} = useForm({
defaultValues: props,
});
return (
<React.Fragment>
<UserSignin></UserSignin>
</React.Fragment>
);
};
const UserSignin = (props) => {
return (
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" …