Как навязать двустороннюю связь между компонентами в ReactJS?

Question

[sharkdest]

Есть класс и функция:

import React from 'react';

export default class ResultsContainer extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      //хочу получить в state ответ с myFunction
      response: ''
    };
  }

  componentDidMount = () => {
    const a=1;
    myFunction(a);
  }

  render() {
    return (
      <div>
      ...
      </div>
    )
  }
}

const myFunction = (props) => {
  const {a} = props;
  const response = a++
    return (
      response
    )
}

Как передать переменную с класса в функцию а потом передать ответ с функции в state класса?

Answer 1

[Антон Спирин]

1. Объявлять componentDidMount стрелочной функцией - маразм. В этом нет никакого смысла.

2. Если ваша функция выполняется синхронно достаточно сократить до:

const response = myFunction(1);
this.setState({ response });

3. Если асинхронно:

componentDidMount() {
  const { someValue } = this.props;
  // асинхронный вызов, возвращающий Promise
  fetchSomeData(someValue).then(response => this.setState({ response }));
}

или:

async componentDidMount() {
  const { someValue } = this.props;
  // асинхронный вызов, возвращающий Promise
  const response = await fetchSomeData(someValue);

  this.setState({ response }));
}

4. Сама функция myFunction написана очень плохо содержит ошибку. Лучше:
const myFunction = num => ++num;

Comments

[sharkdest]

Согласен, вопрос поставлен некорректно, попробую обьяснить суть проблемы :)

Функция myFunction это axios запрос:

getExchangeList = (API) => {
    axios.get(API+"/exchange", {
    })
    .then(res => {
      const  exchange = res.data
    })
    .catch(function (error) {
      console.log(error);
    });
  };

Хочу этот компонент многократно использовать в других компонентах, по типу таких как ResultsContainer
Мне нужно с ResultsContainer передать переменную в getExchangeList, a ответ с axios request передать обратно в ResultsContainer
И еще getExchangeList должен запускаться исключительно тогда когда я его вызову

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

[Антон Спирин]

sharkdest, по-хорошему так:
getExchangeList = () => axios.get('/exchange');
Ошибки обрабатываются либо по месту использования, либо в redux async action. Так как redux вы не используете обрабатывайте на месте.
То-есть:

async componentDidMount() {
  try {
    const data = await getExchangeList();
    // do something with data
  } catch (e) {
    // handle error
  }
}

или:

componentDidMount() {
  getExchangeList().then(res => {
    // do something with res
  }).catch(e => {
    // handle error
  });
}

Вам стоит почитать об организации асинхронного кода.
host можно задать в конфиг axios при инициализации:

import Axios from 'axios';

export const axios = Axios.create({
  baseURL: 'https://some-domain.com/api/',
});

[sharkdest]

Огромное спасибо.

[sharkdest]

Если не составит труда, дайте ответ на еще один вопрос по этой теме:

Если моя функция это не axios запрос, как в таком случае передать с нее переменную?

Вот функция:

getUserData = (userData, criteria) => {
  let key = 0;
  let items = usersData.map((number) =>
     {return {name: number[criteria]}}
   );
   for (let i of items) {
     i.key = key++;
   }
   return items
});

Здесь я пытаюсь ее вызвать и результат вывести в консоль:

getUserData(userData, criteria)
.then(items => {
    console.log(items);
});

[Антон Спирин]

sharkdest, вам определенно стоит разобраться с Promise. В современной разработке их надо знать и уметь применять. Ваш код синхронный. Достаточно:
console.log(getUserData());
Саму функцию можно оптимизировать:

getUserData = (userData, criteria) => userData.map(
  (number, key) => ({ name: number[criteria], key }),
);

Вам определенно надо получше изучить JavaScript.

Answer 2

[Алексей Уколов]

componentDidMount = () => {
    const a=1;
    this.setState({response: myFunction(a)});
}

Если функция асинхронная:

async componentDidMount = () => {
    const a=1;
    this.setState({response: await myFunction(a)});
}