标签: reactjs

我在我的反应应用程序中使用 keycloak 作为身份提供者。我已经使用 npm 在我的 React 应用程序中安装了 keycloak React 依赖项。

以下是依赖的 keycloak React npm 模块及其版本：

"@react-keycloak/web": "2.1.4",
"keycloak-js": "^11.0.2",

我提供了 keycloak 配置如下：

const keycloak = new Keycloak({
  realm: "temp-local",
  url: " http://localhost:8090/auth/",
  clientId: "temp-local-client"
});

每次刷新页面时，它都会使用查询参数state、session_state和code再次刷新（使用回调 url） 。

例如：当我转到页面：http://localhost:8080/test 时，它会转到那里，但它会再次刷新具有以下网址的页面。

示例网址：http://localhost:8080/test# state =45ert45-edac92ddbf2a& session_state =45ga97bbfb4-f080cvb65e59b& code =1a1a-4e6e-3fg578-4fg10b-bbafg8-652fg6c44727a4

如何避免 keycloak 刷新？谁能对此有任何想法吗？

正如我在问题中提到的： Container与Gridcontainer在 Material-UI 中具有属性有何不同？

非常感谢！

我在 Next.js 项目中使用谷歌地图，一切都在本地运行。谷歌地图密钥存储在 next.config.js 中，我通过 process.env.NEXT_PUBLIC_GOOGLEMAPS 在代码中访问它

当我将项目部署到 Vercel 时，出于安全原因，我没有包含 next.js.config。所以我在“设置”->“环境变量”下添加了该密钥

但是，环境变量在生产中不起作用。当我控制台日志 process.env.NEXT_PUBLIC_GOOGLEMAPS 时，我得到 undefined

是什么原因导致此问题以及如何解决它？谢谢

我正在尝试加载要在构建时加载的 markdown 文件。我已经设置了一个使用 Typescript 并使用material_ui博客主题的create-react-app。

import ReactMarkdown from 'markdown-to-jsx';
import post1 from './blog-post.1.md';

export default function Main(props: MainProps) {
  const classes = useStyles();
  const { posts, title } = props;

  return (
    <Grid item xs={12} md={8}>
      <Typography variant="h6" gutterBottom>
        {title}
      </Typography>
      <Divider />
      {posts.map((post) => (
        <Markdown className={classes.markdown} key={post.substring(0, 40)}>
          {post}
        </Markdown>
      ))}
    </Grid>
  );
}

如果帖子被指定为 markdown，它将正确呈现：const post = '# Sample blog post #### April 1, 2020 by [Olivier](/)'

所以问题是 .md 文件没有加载到变量中。

运行时npm start，html …

我有一个简单的全栈放大应用程序。

这是我的模型：

type Note @model @auth(rules: [{allow: public}]) {\n  id: ID!\n  name: String!\n  description: String\n  image: String\n  NoteType: NoteType @connection\n}\n\ntype NoteType @model @auth(rules: [{allow: public}]) {\n  id: ID!\n  name: String!\n}\n

我正在尝试删除具有以下有效负载的注释：

type Note @model @auth(rules: [{allow: public}]) {\n  id: ID!\n  name: String!\n  description: String\n  image: String\n  NoteType: NoteType @connection\n}\n\ntype NoteType @model @auth(rules: [{allow: public}]) {\n  id: ID!\n  name: String!\n}\n

我在响应中看到的是以下 json：

{\n    "query": "mutation DeleteNote($input: DeleteNoteInput!, $condition: ModelNoteConditionInput) {\xe2\x86\xb5  deleteNote(input: $input, condition: $condition) {\xe2\x86\xb5 …

我有InputField 组件，它接受各种道具，如类型、占位符、值等。我正在尝试使用InputField 组件创建一个表单。我可以轻松地从表单传递道具，但无法将输入值保存到我的状态中。这是我的代码。

输入字段.js

import React, { useState } from "react";

const InputField = ({ value, label, placeholder, type, onChange }) => {
  const handleChange = (e) => {
    const { value } = e.target;
    onChange(value);
  };

  return (
    <div className="form-group">
      {label && <label htmlFor="input-field">{label}</label>}
      <input
        type={type}
        value={value}
        className="form-control"
        placeholder={placeholder}
        onChange={handleChange}
      />
    </div>
  );
};

export default InputField;

添加产品表单.js

import React, { useState } from "react";
import { Form, Button } from "reactstrap";
import InputField from "../UI/InputField";

const AddProductForm = …

我想知道使用（或不使用）useEffect 更新 useLocation 之间的最大区别是什么。

我通常发现人们在 useEffect 中设置 useLocation 来在 URL 路径发生变化时更新状态，但我发现我不需要这样做来更新位置。

const NavBar = () => {
  const location = useLocation();
  const [currentPath, setCurrentPath] = useState('')

  const location = useLocation();
  console.log('pathname:', location.pathname)

   useEffect(() => {
     setCurrentPath(location.pathname);
   }, [location]);

console.log('currentPath:', currentPath)
...
}

Returns
pathname: /results:Cancer
currentPath: /results:Cancer

我的意思是，我发现的唯一区别是，使用 useEffect 时，返回将在组件安装后发生。我正在尝试了解成为更好的程序员的最佳实践。

我有一个在内部使用 Primereact 对话框的对话框组件。当我为此制作故事书时，按钮的自定义 css 会被导入，就像导入到dialog.jsx 中一样。但是 Primereact 对话框的默认 css 没有加载并反映在故事书中。尽管它正在我的 React 应用程序中加载。

对话框Comp.jsx

import { Dialog } from "primereact/dialog";


const DialogComp = (props) => {
  return (
    <Dialog
      className="dialog-modal"
      header={props.header}
      visible={true}
    >
      {props.children}
    </Dialog>
  );
};



export default DialogModal;

对话.storybook.js

import React from "react";
import DialogModal from "./dialogComp";

import { addDecorator, addParameters } from "@storybook/react";
import { Store, withState } from "@sambego/storybook-state";

import { store } from "./../../utils/storyStore";
const DialogModalComp = (props) => {
  return [
    <div>
      <DialogModal
        header="Dialog Modal" …

后端： Express 服务器，带有 npx create-express-api 后端

前端：Next.js，带有 npx create-react-app 前端

我已在根文件夹中实现了这些命令，并尝试运行 npm start xxx 来检查它们是否仍在工作。但他们没有在我的http://localhost:3000中工作\n尽管他们在这个链接中工作http://172.27.178.192:3000（在我的网络上）\n这是显示问题的图像

我更换了浏览器，仍然出现同样的问题。在浏览器上显示\n无法连接\nFirefox 可以\xe2\x80\x99t 建立与 localhost:3000 处服务器的连接。

我有几个组件需要访问相同的玩家列表。这个玩家列表不会改变，但我不知道哪个组件首先需要它。我的想法是，无论哪个组件首先需要它（axios 请求）更新我的 redux 存储，然后其他组件将仅使用相同的自定义挂钩。

export default function usePlayersList() {
  const {list, loading, error} = useSelector(state => state.accounts.players)
  const dispatch = useDispatch()
  
  useEffect(() => {
    try {
      const response = authAxios.get(endpoints.players.retrieve)
      response.then(res => {
          dispatch({
            type: "SET_PLAYERS_LIST",
            payload: {
              error: false,
              loading: false,
              list: res.data.payload
            }
          })
        })
    } catch (e) {
      console.log(e)
      dispatch({
        type: "SET_PLAYERS_LIST", 
        payload: {
          error: true,
          loading: false,
          list: []
        }
      })
    }
  }, [dispatch])
  return {list, loading, error}
}

这是我为此定制的钩子。想知道这样做是否有任何不便，或者是否有更好的模式。提前致谢。

顺便说一句...更好的是，我将加载和错误设置为 usePlayersList 中的 useState 变量（而不是将它们发送到 redux …