0

Есть функция, которая возвращает значение. Если её повесить на onClick = {params} ...

const params = async () => {
  console.log((await axios.get('https://some.url/api/calls/CA32c3399414504946ce75fa17ef9bc425.params')).data.to);
}

... то значение в консоль выводится.

Есть элемент Card из Material-ui, в котором атрибут title отвечает за рендер значения из этого атрибута. Но если я передаю в title...

const params = async () => {
  return (await axios.get('https://some.url/api/calls/CA32c3399414504946ce75fa17ef9bc425.params')).data.to;
}
...
<Card
  title = {params}
  ...
/>

... получаю ошибку: Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

Подскажите, пожалуйста, как правильно передать результат в атрибут. Благодарю за помощь!

2 ответа 2

2

Card title принимает только string в качестве аргумента, а вы ему передаёте функцию.

Для решения проблемы сохраните результат выполнения функции куда-нибудь и используйте его.

К примеру:

const [title, setTitle] = useState('')

const fn = async ()=> {
   const newTitle = await params()

   setTitle(newTitle)
}

useEffect(fn, [])

<Card
  title = {title }
/>
3
  • Благодарю. Вот только await вне asynс выдаёт ошибку. Commented 1 мая 2020 в 12:33
  • @KonstantinVeselovskii обновил пример
    – ZiiMakc
    Commented 2 мая 2020 в 14:42
  • Спасибо, взял на вооружение. Commented 2 мая 2020 в 18:57
0

Решил следующим образом.

const [meetings, setMeetings] = useState([]);
useEffect(() => {
 const params = async () => {
  ...
 }
 let fetchedData;
 params()
   .then(res => {fetchedData = res})
   .then(() => {setMeetings(fetchedData)})
   .then(() => setLoading(false));
 }, []);

Благодарю RTW за наводку.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.