小编fre*_*erk的帖子

Next.js 文档提到了两种访问router对象的方法：useRouter功能组件和withRouter基于类的组件。

然而，它没有提到我几次遇到的东西，即Router按如下方式访问的对象，例如：

import Router from 'next/router'

Router.push("/")

Router这样使用正确吗？为什么 Next.js 文档没有提到它？

我正在开发一个库Next.js 应用程序。出于此问题的目的，我的应用程序中有两个页面：列出所有书籍的BooksPage和呈现书籍详细信息的BookPage 。就组件而言，我有一个<Books />组件可以<Book />为我的图书馆数据库中的每本书呈现一个组件。

这是我的组件：

图书.js：

function Books({ books }) {
  return (
    <>
      {books.map(book => (
        <Book key={book.id} book={book} />
      ))}
    </>
  );
}

书.js：

class Book extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = { liked: false };
  }

  like = () => {
    this.setState({ liked: this.state.liked ? false : true })
  };

  render() {
    return (
      <>
        <Link href={`/books/${book.slug}`}>
          <a>{book.title}</a>
        </Link>

        <Button …

我正在使用 NextJSgetStaticProps从外部 API 获取一些数据。在阅读有关getStaticProps的数据获取文档时，我遇到了这个特别的说明：

注意：您不应使用 fetch() 在您的应用程序中调用 API 路由。而是直接导入API路由，自己调用它的函数。您可能需要为这种方法稍微重构您的代码。

现在我getStaticProps直接从一个页面组件调用Index，如下所示：

export default function Index({ data }) {
  return <div>{data}</div>;
}

export async function getStaticProps() {
  const response = await fetch("http://127.0.0.1:8000/data");
  const data = await response.json();
  return { props: { data } };
}

根据上述文档，不应该这样做。如何重构我的代码以正确获取数据？“导入API路由，自己调用它的函数”是什么意思？

我正在尝试根据当前子域翻译我的下一个应用程序。例如，我想en.hello.com用英语，并it.hello.com用意大利语。

我正在尝试使用 Next 的域路由来实现这一点，但显然，这并不意味着与子域一起使用，而是与顶级域一起使用，例如英语和意大利语的hello.en和。hello.it

这是我的next.config.js：

module.exports = {
  i18n: {
    locales: ["en", "it"],
    defaultLocale: "en",

    domains: [
      {
        domain: "en.hello.com",
        defaultLocale: "en",
      },
      {
        domain: "it.hello.com",
        defaultLocale: "it",
      },
    ],
  },
};

这些设置无法映射en.hello.com到英语和it.hello.com意大利语。

谁能解释一下为什么会这样以及如何在 Next 中实现子域路由？

我试图传递一个user对象作为我的 React 的值，Context.Provider如<UserContext.Provider value={user} />. 然而，React 不喜欢将对象作为子对象传递的想法。这是我收到的错误消息：

错误：对象作为 React 子对象无效（找到：带有键 {id、用户名、名字、姓氏、电子邮件、头像}的对象）。如果您打算渲染子集合，请改用数组。

我希望有人能提供帮助。这是我的 React 组件，所有这些都发生在其中：

class MyApp extends App {
  constructor(props) {
    super(props);
    this.state = {
      user: {},
      authenticating: false,
    };
  }

  logout = () => {
    ...
  };

  render() {
    const { Component, pageProps } = this.props;
    const user = {
      user: this.state.user,
      logout: this.logout,
    };
    return (
      <>
        {!this.state.authenticating && (
          <UserContext.Provider value={user}>
            <Navbar />
            <Component {...pageProps} />
          </UserContext.Provider>
        )}
      </>
    );
  } …

我正在使用该类UserCreationForm在 Django 应用程序中创建注册页面。

这是定义我的代码SingUpForm：

class SignUpForm(UserCreationForm):
    email = ...
    username = forms.CharField(label="Username",
        widget=forms.TextInput(attrs={
            ...
            "autofocus": False,
            ...
        }))
    password1 = ...
    password2 = ...

尽管autofocus属性被设置为False，当我在浏览器中打开表单时，焦点仍然在该username字段上。

我怎样才能禁用它？

我试图对VoteDjango 应用程序中的模型强制实施约束，即用户不能对同一对象多次投票。

为此，我正在使用unique_together：

class Vote(models.Model):
    vote = models.SmallIntegerField(choices=VOTES, null=True, blank=True)
    user = models.ForeignKey(User, on_delete=models.CASCADE,
        related_name="user_votes")
    definition = models.ForeignKey(Definition, on_delete=models.CASCADE,
        related_name="definition_votes")

    class Meta:
        # Ensure user cannot vote more than once.
        unique_together = ["user", "definition"]

我认为这有效。

然而，在 Django 的文档中指出unique_together：

UniqueConstraint提供比 . 更多的功能 unique_together。unique_together将来可能会被弃用。

如何将上面的代码 using 替换unique_together为代码 using UniqueConstraint？