React. Material-UI. Передать результат выполнения функции в аттрибут компонента

Question

Есть функция, которая возвращает значение. Если её повесить на 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.

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

Answer 1

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

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

К примеру:

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

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

   setTitle(newTitle)
}

useEffect(fn, [])

<Card
  title = {title }
/>

Answer 2

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

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

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

БЛОГ НА HUSL

React. Material-UI. Передать результат выполнения функции в аттрибут компонента

Ответы (2 шт):