Реакция: вызов setState из другого компонента

Это родительский компонент:

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      news: ""
    }
  }
  componentDidMount() {
    this.updateNews();
  }

  updateNews = () => {
      ...
  }

  render() {
      <CustomButton type = "primary"  />
  }

Это CustomButton:

const CustomButton = (props) => {
  const {
    type
  } = props;


  const updateItem = () => {
     ... // The firing of the setState should be here
  }

  return (
   <Button
    type = {type}
    onClick = {() => {
        updateItem();
      }}
    >{value}
   </Button>
  );

Как я могу запустить изнутри const updateItem = () => { в CustomButton, чтобы Parent запускал updateNews или componentDidMount?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
4
0
9 925
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы должны передать функцию обратного вызова CustomButton, что-то вроде этого:

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      news: ""
    }
  }
  componentDidMount() {
    this.updateNews();
  }

  updateNews = () => {
      ...
  }

  render() {
      <CustomButton type = "primary"  stateUpdatingCallback = {(val) => {this.setState({myVal: val})}}/>
  }


const CustomButton = (props) => {
  const {
    type
  } = props;


  const updateItem = () => {
     ... // The firing of the setState should be here
  }

  return (
   <Button
    type = {type}
    onClick = {() => {
        this.props.stateUpdatingCallback("somevalue")
      }}
    >{value}
   </Button>
);
Ответ принят как подходящий

Используйте componentDidUpdate в родительском компоненте следующим образом.

class Parent extends Component {
  constructor(props) {
   super(props);
   this.state = {
    news: "",
    fetchToggle:true
   }
  }
  componentDidMount() {
   this.updateNews();
  }

  componentDidUpdate(prevprops,prevstate){
    if (prevstate.fetchToggle!==this.state.fetchToggle){
       this.updateNews();
    }
  }
  updateNews = () => {
   ...
  }
  fetchToggle=()=>{
     this.setState({
      fetchToggle:!this.state.fetchToggle;
     })
   }

  render() {
    <CustomButton type = "primary" fetchToggle = {this.fetchToggle} />
  }

В дочернем компоненте нажатие кнопки вызывает эту функцию переключения.

const CustomButton = (props) => {
  const {
   type
  } = props;

  const updateItem = () => {
   ... // The firing of the setState should be here
  } 

  return (
   <Button
     type = {type}
     onClick = {() => {
       props.fetchToggle()
     }}
   >{value}
   </Button>
  );

Помните, что значение переключения в состоянии - это более чистый и элегантный способ обновления или получения последних данных при каждом щелчке мышью.

Как он узнает из CustomButton, что props.fetchToggle() вызывает функцию другого компонента?

AmazingDayToday 25.10.2018 09:09

Мы передаем функцию как обратный вызов ее дочерним элементам в общей практике. Использование componentDidUpdate заключается в том, что всякий раз, когда состояние обновляется, эта функция запускается. Чтобы вызвать эту функцию, мы должны обновить некоторое значение состояния, поэтому лучше всего просто использовать какое-то значение который имеет всего два значения, например bool. когда вы нажимаете кнопку в custombutton, эта функция запускается и состояние обновляется. Это повторно отображает страницу. Если вы не используете componentDidUpdate, это невозможно, поскольку componentdidmount запускается только один раз.

Thakur Karthik 25.10.2018 09:13

Другие вопросы по теме