Блог

Главная - Вопросы по программированию - Как вызвать родительскую функцию из дочернего элемента и не обновлять родительское состояние?

Как вызвать родительскую функцию из дочернего элемента и не обновлять родительское состояние?

#javascript #reactjs #react-hooks #jsx

#javascript #reactjs #реагирующие хуки #jsx

Вопрос:

В React 16.X у меня есть функция в моем родительском компоненте:

 const fetchData = ()=> {
  return ajax
     .get({},data)
     .then((response) =>
       {
         setState(response);
         // Here I update the state with setState()
       })
     .catch((error) =>
       {
       });
};

Теперь я передаю это внутри своего дочернего элемента в props :

 <child fetchData={fetchData}/>

В моем дочернем элементе я использую:

 const {fetchData} = props;

// from my parent

Но когда я вызываю это fetchData из своего дочернего элемента, оно обновляет состояние моего родителя (из-за setState ). Все, что я хотел, это повторно fetchData использовать функцию для получения данных из API, а не изменять состояние родительского элемента.

Есть ли возможный способ добиться этого? Я хочу повторно использовать функцию fetchData , но не обновлять родительское состояние.

Комментарии:

1. Вместо того, чтобы делать setState команду частью функции, ограничьте функцию самим запросом (т. Е. Позвольте ей возвращать только вызов ajax.get). Затем используйте props.fetchData().then(response => ...) в дочернем компоненте. В качестве альтернативы, передайте правильный setState метод в fetchData качестве параметра.

2. я понимаю, что это очень простое решение, но в случае, когда проект превращается в огромные файлы, есть ли другой способ добиться этого? @ChrisG

3. Ну, это тоже очень простая проблема 🙂 Не уверен, что понимаю, почему размер проекта будет иметь значение; мое решение создает универсальную функцию для получения данных, что делает ее идеально подходящей для большого проекта. Не уверен, какое другое решение вы представляете здесь?

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

Ответ №1:

На случай, если вы застряли в этом:

Пожалуйста, используйте следующее, чтобы пройти:

 //define a function that only returns the request

const request = () =>{
    return ajax
           .get({},data);
};

//In anywhere else use it like this in main function

const fetchData = async ()=> {
    const request = this.request();

    return request
    .then((response) =>
        {
            setState(response);
            // Here I update the state with setState()
        })
        .catch((error) =>
        {
        });
};

//Or pass it in the props to use in the child component as
//In parent
<Abc requestFunc={this.request}/>

//and in Abc Component

const abc= (props)=>{
    const requestCall = {props}
}

//call requestCall

requestCall().then....