Как передать state из одного компонента в другой

Question

есть 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'

Answer 1

Ну так вы почти правильно всё делаете. Я про сам метод передачи в другой компонент. А вот проблема у вас сейчас в том, что вы пытаетесь использовать обычный функциональный компонент, как классовый. Определитесь, какой он должен быть: классовый или функциональный? Если всё-таки функциональный, то просто вызовите функцию при клике (например), но не используйте 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>
  )
}

Answer 2

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.

Answer 3

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

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

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

            <FilterMobile
              currentFilters={currentFilters}
              openFiltersModal={() =>
                this.setState({ filtersModalState: true })
              }
            />

БЛОГ НА HUSL

Как передать state из одного компонента в другой

Ответы (3 шт):