Ошибка настройки родительского состояния из дочернего с использованием реквизитов рендеринга: "Ошибка типа: <имя_метода_ не является функцией"

#javascript #reactjs #next.js

Вопрос:

Использование 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("")

Ответ №1:

Проблема возникает из-за того, что вы разрушаете setLoginToken из this.state , вместо this .

Вы можете одним выстрелом сделать это с

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