Можете ли вы передать это в качестве аргумента компоненту без рендеринга в React?

Question

Вопрос, в частности, связан с передачей 'this', чтобы установить состояние в компонентах без рендеринга React

Я устанавливаю начальное состояние из данных, полученных из вызова XHR.Это хорошо работает в основном приложении, как это:

export default class App extends Component {
  constructor() {
    super();
    this.state = { someKey: [] };
  }
  
  XhrLoader() {
    const req = new XMLHttpRequest();
      ... 
    this.setState({someKey: [data]});
  }

  componentDidMount() {
    this.XhrLoader();
  }
}

При экспорте функции XhrLoader вы можете передать «this» в модуль как:

import XhrLoader from 'Xhrloader';
export default class App extends Component {
  constructor() {
    super();
    this.state = { someKey: [] };
  }

  componentDidMount() {
    this.XhrLoader(this);
  }
}

  // imported module
  XhrLoader(app) {
    const req = new XMLHttpRequest();
      ... 
    app.setState({someKey: [data]});
  }

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

export default class App extends Component {
  constructor() {
    super();
    this.state = { prodList: [] };
    this.SetState = this.SetState.bind(this);
  }

  componentDidMount() {
    XhrLoader(this.SetState);
  }

  SetState(newState) {
    this.setState(newState);
  }
}

// in XrhLoader
export default function XhrLoader(setAppState) {
 ...
 setAppState({someKey: newData)}
}

компонент ничего не рендерит, обычно просто передает данные и методы через реквизиты:

< XhrLoader setter={someBoundMethod} />

Но этот способ выполняет ненужные рендеры, если рендеринг возвращает null

Существует ли правильный стиль React для достижения состояния установки из импортированных компонентов без рендеринга?

Answer 1

Как говорит actjs.org Док:

Концептуально компоненты похожи на функции JavaScript.Они принимают произвольные входные данные (называемые «реквизитами») и возвращают элементы React, описывающие то, что должно появиться на экране .

, тогда использование шаблона не очень удобно длявыборка данных.

для этой цели, если вы создаете другой модуль JavaScript (файл) для вашего XhrLoader , затем импортируете его в свой компонент и используете его в своем componentDidMount с обратным вызовом.

// xhrLoader module

export function xhrLoader(onSuccessCallback) {
   const req = new XMLHttpRequest();
   ... 
   if (onSuccessCallback) onSucceessCallback(result);
}

// App.jsx
import {xhrLoader} from "xhrLoader.js";

export default class App extends Component {
    constructor() {
       super();
       this.state = { prodList: [] };
    }
    componentDidMount() {
       const onSuccess = (result) => {
          this.setState({prodList: result});
       }
       xhrLoader(onSuccess);
    }
 }

также, если вы используете библиотеки, такие как axios , вы можете достичь своего результата с помощью обещания, такого как:

const axios = require('axios');

componentDidMount() {
    axios.get(url).then(resp => this.setState({prodList: resp.result}));
}