3

есть 2 файла. 1

const FilterMobile = (tokensCount) => {
  return (
    <div className="class1">
      <Button
        onClick={() => this.setState({ filtersModalState: true })}
      >
      </Button>
    </div>
  )
}
export default FilterMobile

2 Собственно, вызов

<FilterMobile tokensCount={tokensCount} />

как передать стейт из 2 файла в 1? Ошибка Stateless functional components should not use 'this'

0

3 ответа 3

2

В общем решил проблему, если кому пригодится:

const FilterMobile = ({ openFiltersModal, currentFilters }) => {
  return (
    <div className="class1">
      <Button
        onClick={() => openFiltersModal()}
      >
        )}
      </Button>
    </div>
  )
}

Вызов соответственно

            <FilterMobile
              currentFilters={currentFilters}
              openFiltersModal={() =>
                this.setState({ filtersModalState: true })
              }
            />
1
  • Костыльный и непонятный выход. Для чего вы используете контекст в функциональном компоненте? Или же компонент, в котором находится FilterMobile является классом? Тогда нужно было сразу уточнить.
    – jjswift
    11 мар 2022 в 4:50
0

Ну так вы почти правильно всё делаете. Я про сам метод передачи в другой компонент. А вот проблема у вас сейчас в том, что вы пытаетесь использовать обычный функциональный компонент, как классовый. Определитесь, какой он должен быть: классовый или функциональный? Если всё-таки функциональный, то просто вызовите функцию при клике (например), но не используйте this.setState (это установка стейта в классовом компоненте) как-то так: onClick={() => tokensCount()}

Если компонент, должен стать классовым, то его нужно переписать иначе: унаследовать React.Component, добавить метод render и т.д.

Вот как можно использовать то, о чем я писал выше:

import { useState } from "react";
import "./styles.css";

export default function App() {
  let [count, setCount] = useState(0);

  let tokensCount = () => {
    setCount(count + 1)
  }
  return (
    <div className="App">
     count: {count}
      <FilterMobile tokensCount = {tokensCount}/>
    </div>
  );
}

const FilterMobile = ({tokensCount}) => {
  return (
    <div className="class1">
      <button
        onClick={() => tokensCount()}
      >
        Click me
      </button>
    </div>
  )
}

0

this.setState используется в классовых компонентах. Для хранения состояния в функциональных - используйте хук useState (здесь так же описаны отличия от классовых).

Итоговое решение такого:

const FilterMobile = (props) => {

  // tokensCount придет сюда. Обратиться к нему можно через props.tokensCount
  // либо же сразу деструктуризировать пропсы 
  // const FilterMobile = ({ tokensCount}) => { .... }

  const [filtersModal, setFiltersModal] = useState(false) // Зададим как false изначально

  return (
    <div className="class1">
      <Button
        onClick={() => setFiltersModal(true)}
      >
      </Button>
    </div>
  )
}
export default FilterMobile

Вызов будет таков:

<FilterMobile tokensCount={tokensCount} /> 
// где tokensCount - какое-то значение, которые мы 
// передаем через props в FilterMobile.
1
  • Спасибо, а как мне передать новое значение стейт в другой файл? Ошибка filtersModal is assigned a value but never used. 1 мар 2022 в 8:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.