1

У меня есть такой кусочек кода, который должен при первом рендере компонента запросить данные и записать их в useState. Но в консоли выводится data с каким-то значением, и name - пустой.

const [authorName, setAuthorName] = useState<string>('');

  useEffect(() => {
    const getData = async () => {
      const {data} = await axios.get('http://localhost:3001/author-name');
      console.log('data', data.name)
      setAuthorName(data.name)
      console.log('name', authorName)
    }

    getData()
  }, [])

Я предполагаю, что это может быть из-за асинхронности функции. Подскажите как это решить?

2 ответа 2

2

Функции сеттеры state асинхронные и для того чтобы вывести в консоль authorName необходимо использовать useEffect:

useEffect(()=>{
  if (authorName !== ''){
    console.log(authorName)
  }
}, [authorName])

В квадратных скобках передаются зависимости, при изменении значений которых будет происходить вызов переданной функции, а так же все используемые внутри переменные или функции объявленные снаружи.

В примере ниже показано когда данные реально могут отобразится todo title2

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- Load our React component. -->
    <script type="text/babel">
      window.useState = React.useState;
      window.useEffect = React.useEffect
      window.Fragment = React.Fragment

      const Component = () => {
        const [todoTitle, setTodoTitle] = useState('');

        useEffect(() => {
          const getData = async () => {
            const result = await fetch('https://jsonplaceholder.typicode.com/todos/1')
            const data = await result.json()
            console.log('userId', data )
            setTodoTitle(data.title)
            console.log('todo title1', todoTitle)
          }

          getData()
        }, [])

        useEffect(()=>{
          if (todoTitle !== ''){
            console.log('todo title2', todoTitle)
          }
        }, [todoTitle])

        return <p>{todoTitle}</p>
      }  

      const App = () => {
        return (
            <Component />
        );
      };

      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>
</html>
 

4
  • Я не совсем понимаю как это может помочь решить проблему того, что данные не сохраняются в state? Вынести куда - то в другое setter я не могу из-за ограничения области видимости для переменной.
    – xantin
    30 янв 2022 в 17:27
  • это не может решить а решает проблему, и вообще это не проблема просто работа с асинхронностью в реакте обновление стейта зависит не от Вас, Вы лишь происите его обновить а когда это произойдет решает сама библиотека, в вашем случае можно было бы просто набрать console.log(data.name) для синхронного эффекта. Данные сохраняются просто вы их увидете при следующем рендере. 30 янв 2022 в 17:35
  • Я все равно не могу понять, что мне нужно сделать, чтобы не было такого эффекта и данные записывались в state. Точнее, чтобы данные были при первом рендере.
    – xantin
    30 янв 2022 в 17:37
  • Я дополнил примером свой ответ, переменные не такие - но суть та же. А при первом рендере только так console.log(data.name) можно, не опираясь на стейт (он обновляется позже) либо использовать функцию колбека в сетстейте, помоему так тоже можно, но я предпочитаю не делать так - лишний код, лучше понимать как это работает 30 янв 2022 в 18:03
0

Как по мне, нужно сделать проверку на то, что что-то приходит. Соответственно »

const [authorName, setAuthorName] = useState<string>('');

useEffect(() => {
    const getData = async () => {
        const {data} = await axios.get('http://localhost:3001/author-name');
        console.log('data', data?.name) // проверка на undefined
        setAuthorName(data?.name ?? data.name : '') // проверка пришло значение » если нет то устанавливается пустая строка
        authorName !== '' && console.log('name', authorName) // выводим значение если autor !== ''
    }

    getData()
}, [])

Ваш ответ

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

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