react hooks функция изменяющая значение не работает

Question

Для работы приложения необходимо записать в переменную prop данные полученные с сервера, данные приходят верные, setProp(data) не меняет значение prop.

import React, { useState, useEffect } from 'react'

function BasketRender() {
    let [prop, setProp] = useState([])
    let [cookie, setCookie] = useState(getCookie())
    let [item, setItem] = useState(items(prop))

    useEffect(() => {
        fetchData()
      },[cookie])


    function fetchData() {
        let arrayCookie = getCookie()
        let stringCookie =''
        for (let i = 0; i < arrayCookie.length -1; i++) {
            arrayCookie[i] += 'forsplit'
        }
        stringCookie = arrayCookie.join('')
        fetch('ajax.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                "Access-Control-Allow-Origin" : "*", 
                "Access-Control-Allow-Credentials" : true 
            },
            body: stringCookie
        })
        .then(str => str.text())
        .then(str => str.slice(0,-8))
        .then(string => string.split('forsplit'))
        .then(function(res){
            let newArray=[];
            for(let i = 0; i < res.length; i++) {
                newArray[i] = JSON.parse(res[i]);
            }
            return newArray;
        })
        .then(data => {
            setProp(data)
            setItem(()=>items(prop))
            console.log(prop)
        })
        }
    }

следующий код не помогает:

function setter(data){
    setProp(data)
}
....
.then(data=>setter(data))

следующий код приводит к зацикливанию запроса, при этом prop устанавливается, но почему не устанавливается с первого запроса?

useEffect(() => {
        fetchData1()
      },[prop])

Answer 1

useState (он же setState) - асинхронный. по-этому после его вызова он попадает в task queue (очередь событий), а следующий код пытается выполняться дальше.

то есть, теоретически, во время выполнения следующей инструкции setItem(()=>items(prop)), состояние prop до сих пор остается прежним, а именно пустым массивом.

я могу предложить решение, но боюсь ошибиться в коде, так как давно этим не занимался, но попробовать стоит:

.then(async (data) => {
    await setProp(data);
    await setItem(()=>items(prop));
    console.log(prop);
})

если же код не помог, то прошу меня простить

Answer 2

useEffect(() => {
    fetchData1()
 },[])

useEffect(()=>{
    setItem(()=>items(prop))
},[prop])

проблема решена

БЛОГ НА HUSL

react hooks функция изменяющая значение не работает

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