Error setting parent state from child using render props: "TypeError: <methodName> is not a function"

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

问题来自于您从 this.state 解构 setLoginToken，而不是 this。

你可以用

一次拍摄

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

Error setting parent state from child using render props: "TypeError: <methodName> is not a function"

Error setting parent state from child using render props: "TypeError: <methodName> is not a function"

javascript

reactjs

next.js