我正在尝试使用 Next-Auth 将身份验证添加到我的 Next.js 项目。500 internal server error但是，提交凭据后我陷入了困境( http://localhost:3000/api/auth/error?error=Configuration)。
我认为这可能与在http://localhost:3000上运行有关，但我不确定。我做错了什么？
页面/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';
const options = {
site: 'http://localhost:3000',
providers: [
Providers.Credentials({
name: 'Credentials',
credentials: {
username: { label: 'Username', type: 'text', placeholder: 'jsmith' },
password: { label: 'Password', type: 'password' },
},
authorize: async (credentials) => {
consol.log('credentials', credentials);
const user = { id: 1, name: 'J Smith', email: 'jsmith@example.com' };
if (user) {
return Promise.resolve(user);
} else { …这是我第一次尝试 npm-link，尝试创建共享组件存储库，但遇到了问题。当显示此消息时，我认为我已正确链接投影：
/Users/tom.allen/Development/main/project/node_modules/@linked/project -> /usr/local/lib/node_modules/@linked/project -> /Users/tom.allen/Development/shared_component_lib
该模块在 node_modules 文件夹中显示良好，但是，当我尝试添加在 @linked/test 存储库中创建的组件时，我收到一条错误消息：
Module not found: Error: Can't resolve '@linked/project' in '/Users/tom.allen/Development/...'
在shared_component_lib的package.json中我有：
"name": "@linked/project",
"version": "0.1.0",
"main": "index.js",
"dependencies": {
...
},
我将组件导出为：
export { default as Hello } from './Hello';
并导入为：
import {Hello } from '@linked/project';
我已经三重检查了拼写错误，并查看了 webpack 配置（这对我来说远非强项），但无法真正看出我哪里出了问题。
如果这没有多大意义，请提前道歉！任何帮助将不胜感激。
我对 webpack 不是很擅长，我正在尝试将 webpack 从 V3 更新到 V4 并设法将我的 webpack 配置更新到它不会向我抛出折旧错误的程度，但我现在陷入了来自 babel-loader 的语法错误：
Module build failed (from ./node_modules/babel-loader/lib/index.js):
/path/react/node_modules/schema-utils/dist/util/hints.js:16
const currentSchema = { ...schema
SyntaxError: Unexpected token ...
在我的 webpack 配置中，我有这个：
test: /\.(js|jsx)$/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react',
{
plugins: [
'@babel/plugin-proposal-class-properties'
]
}
],
compact: true,
cacheDirectory: false, // @todo: legacy option: true
},
}
]
我正在使用以下版本：
"@babel/core": "^7.1.6",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
我曾多次尝试使用不同版本的 babel，但总是以这条消息告终。谁能看到我犯的任何明显错误？
我正在学习 Next.JS 和 React，想知道是否可以从存储 JWT 的 cookie 中获取用户详细信息。
我已经设法将 JWT 设置为 cookie 并且可以成功记录它并且还设法对其进行解码，但无法找到有关如何从中获取用户名、ID 等的任何信息。这是我到目前为止所拥有的：
import React from "react";
import App from "../components/App.js";
import cookie from "react-cookies";
import jwt_decode from "jwt-decode";
export default class Dashboard extends React.Component {
static async getInitialProps() {
const token = cookie.load("jwt");
return { token };
}
constructor(props) {
super(props);
this.state = props.token;
}
render() {
const current_user = jwt_decode(this.props.token, { header: true });
return (
<App>
<p>Username: {current_user.username}</p>
</App>
);
}
}
理想情况下，我希望能够将 cookie 值设置为用户变量并从中提取属性，例如 current_user.username。除非我完全弄错了并且错过了一些非常重要的东西！任何帮助将不胜感激！
目前在 React 中练习 state 和 props，我有一个相当大的组件，我试图将其拆分为几个较小的组件，但是我不确定如何将数据从一个组件传递到另一个组件。
该组件当前包含一个具有多个输入的表单，并在提交时呈现它们。据我了解，最好的方法是将表单放在它自己的组件中，然后使用 props 传入父组件的状态。但是如何使用多个输入完成此操作并确保 handleChange 和 handleSubmit 方法有效。
作为 React 的新手，当我在一个组件中定义并在另一个组件中调用时，我仍然不知道如何调用像 onChange 这样的方法。
这是我到目前为止所得到的（一个重要的组成部分......）：
export default class App extends Component {
constructor(props){
super(props);
this.state = {
post: {
name: "",
description: "",
level: "Junior",
salary: 30000
},
jobs: []
};
}
handleChange = e => {
const { name, value } = e.target;
this.setState(prevState => ({
post: { ...prevState.post, [name]: value }
}));
};
handleSubmit = e => {
e.preventDefault();
this.setState(prevState => ({
jobs: [...prevState.jobs, …我一直在阅读 Next.js 文档，并认为我了解 [slug].js 动态路由过程，但我很难理解文件夹结构方面的嵌套动态路由。
如果我想制作一个基于用户的应用程序，我将如何实现/user/[userid]/post/[postId]？
并且想要这样的东西：
user
- [id].js // e.g. user/1
- [userId]
- - post
- - - [postId].js // e.g. user/[userId]/post/[postId]
但这会引发关于 [slugs] 的错误，因为我认为在同一个文件夹中不能有两个 slug。
任何人都可以解释正确的文件夹结构来实现这一目标吗？非常感谢任何帮助。
我有一个函数，我想在其中返回一些 HTML，但是当我调用该函数或记录它时，它将变量返回为未定义：
contentForRender = () => {
const el = (
<div><span>Lorem Ipsum</span></div>
);
return el;
}
componentDidUpdate(prevProps, prevState, prevContext) {
const el = this.contentForRender();
console.log('el', el);
console.log('el_inner', el.innerHTML);
// do something with el.innerHTML
}
当我注销时，componentDidUpdate 中的 'el' 变量是typeOf: Symbol(react.element)el.innerHTML undefined。
是否有不同的方式为 React 元素获取 innerHTML？
我试过使用 refs，但由于我对 React 还是相当陌生，我不确定我是否做得正确，也想不出为什么它不起作用。任何帮助将不胜感激！