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с выдаёт ошибку. 1 мая 2020 в 12:33
  • @KonstantinVeselovskii обновил пример
    – ZiiMakc
    2 мая 2020 в 14:42
  • Спасибо, взял на вооружение. 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 за наводку.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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