小编Ami*_*era的帖子

在 React JSX 功能组件中从数组中删除值时状态未更新

值通过复选框选择添加到数组中,该复选框工作正常并更新状态,但是当我从数组中删除值时,状态不会更新,但数组正在被修改

大批

  const [selectedKeys, setSelectedKeys] = React.useState([]);
Run Code Online (Sandbox Code Playgroud)

事件

 if (event.target.checked) {
               //adding values to array
      setSelectedKeys([...selectedKeys, event.target.value]);
    } else {
      var index = selectedKeys.indexOf(event.target.value);
      if (index >= -1) {
             //Removing values from array
        selectedKeys.splice(index, 1);
      }
      setSelectedKeys(selectedKeys);
    }
Run Code Online (Sandbox Code Playgroud)

arrays rendering jsx reactjs

2
推荐指数
1
解决办法
1180
查看次数

如何在React中从数据库渲染HTML?

我正在 Grapesjs 的帮助下制作自定义网页。我想在react js中渲染html页面,该页面已由grapesjs编辑器保存在数据库中。以下是保存数据的格式。

现在我只能在检查窗口中获取 html 代码,但是如何将其呈现在页面上?

import React from "react";
import axios from "axios";
// import {renderWebpage} from "../actions/webpage"

export const Page: React.FC = () => {
  const renderWebpage = axios
    .get("http://localhost:8080/61ea7fd2268f37443ca4d59a")
    .then((response) => {
      console.log("response", response);
      console.log(response.data, "data");
    });

  return <div>demo</div>;
};
Run Code Online (Sandbox Code Playgroud)

html javascript reactjs grapesjs

2
推荐指数
1
解决办法
1万
查看次数

我无法解决的一些依赖项问题

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @react-native-community/async-storage@1.12.1
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!   peer react@">=16.3.0" from @callstack/react-theme-provider@3.0.7
npm ERR!   node_modules/@callstack/react-theme-provider
npm ERR!     @callstack/react-theme-provider@"^3.0.7" from react-native-paper@4.12.4
npm ERR!     node_modules/react-native-paper
npm ERR!       react-native-paper@"^4.12.4" from the root project
npm ERR!   25 more (@react-native-community/masked-view, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8" from @react-native-community/async-storage@1.12.1
npm ERR! node_modules/@react-native-community/async-storage
npm ERR! …
Run Code Online (Sandbox Code Playgroud)

macos npm reactjs react-native

2
推荐指数
1
解决办法
1380
查看次数

使用 MUI v5 实现深色模式

在 v5 中,尝试创建一个从深色模式切换到浅色模式的切换对我来说相当困难。

直接使用来自 MUI Sandbox MUI darkmode的代码,我尝试将代码分离以在 app.js 和我的 Navbarpractice.js 中工作。

应用程序.js

import React from "react";
import useMediaQuery from '@mui/material/useMediaQuery';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { Paper } from "@mui/material";
import BasicCard from "./components /Card.js";
import Navbarpractice from "./components /Navbar/Navbarpractice"

const ColorModeContext = React.createContext({ toggleColorMode: () => {} });


function App() {
  const [mode, setMode] = React.useState('light');
  const colorMode = React.useMemo(
    () => ({
      toggleColorMode: () => {
        setMode((prevMode) => (prevMode …
Run Code Online (Sandbox Code Playgroud)

button reactjs material-ui darkmode lightmode

1
推荐指数
1
解决办法
1万
查看次数