Question

使用Next.js / React.js，我已经使用官方Next.js教程中所示的设置构建了一个简单的应用程序。这意味着我正在使用在不同页面周围呈现的<Layout />组件。我在下面显示我的代码。

现在，我尝试使用渲染道具从子组件设置<Layout />组件的某些状态。这样做时，出现以下错误：

TypeError: setLoginToken is not a function

有人可以解释为什么会发生这种情况，并告诉我如何使它起作用吗？单击

上的两个按钮之一时出现此错误

我的代码：

布局组件（components/Layout.js）

import React from "react";

class Layout extends React.Component {
  state = {
    loginToken: "abc123"
  };

  setLoginToken = newToken => {
    this.setState({ loginToken: newToken });
  };

  render() {
    const { render } = this.props;
    const { loginToken, setLoginToken } = this.state;
    return (
      <React.Fragment>{render({ loginToken, setLoginToken })}</React.Fragment>
    );
  }
}

export default Layout;

索引页（pages/index.js）

import React from "react";
import Layout from "../components/Layout";

class Index extends React.Component {
  render() {
    return (
      <Layout
        render={({ loginToken, setLoginToken }) => (
          <div>
            <p>Login token: {loginToken}</p>
            <button onClick={() => setLoginToken("asdfasdf")}>Log in</button>
            <button onClick={() => setLoginToken("")}>Logout</button>
          </div>
        )}
      />
    );
  }
}

export default Index;

我也尝试了以下方法，结果相同：

(setLoginToken) => setLoginToken("asdfasdf")
(setLoginToken) => setLoginToken("")

Answer 1

问题出在您正在从setLoginToken而不是this.state中解构this。

您可以使用

const { state: { loginToken }, setLoginToken } = this

使用渲染道具从子级设置父状态时出错：“ TypeError：<方法名称>不是函数”

1 个答案: