useEffect и asyn c () - PullRequest
Новая
       91

useEffect и asyn c ()

0 голосов
/ 19 июня 2020

В хуке useEffect() я в основном пытаюсь добавить 'id' к каждому 'item' объекту, сопоставленному с tempData, увеличивая состояние lastIndex на каждой итерации. Однако все сопоставленные item.id возвращают 0 (значение начального состояния).

Я предполагаю, что что-то не так с вызовом функции setLastIndext в итерациях? Спасибо. 

const SearchAppointments  = React.memo(() => {


  const [data, setData] = useState([ ])

  const [lastIndex, setLastIndex] = useState(0)

  useEffect( () => {
    const fetchData = async() => {
      var response = await fetch('../data.json');
      var result = await response.json()
      var tempData = result.map( item => {
        item.id = lastIndex;
        setLastIndex(lastIndex => lastIndex + 1);
        return item
      })
      setData(tempData)
    };
    fetchData();
  }, [])

    return (
      <div>
      </div>
    );
})

Ответы [ 3 ]

1 голос
/ 19 июня 2020

Вы попробуете это: 

const SearchAppointments  = React.memo(() => {
  const [data, setData] = useState([]);

  const fetchData = async() => {
    const response = await fetch('../data.json');
    const result = await response.json();

    setData(result.map( (item, index) => ({...item, id:index})))
  };

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

    return (
      <div>
      </div>
    );
})```
1 голос
/ 19 июня 2020

setLastIndex - это асинхронная c функция, значение lastIndex будет обновлено только при следующем рендеринге, а result.map - это syn c function ==> lastIndex всегда 0 в result.map

Вы можете попробовать это: 

const SearchAppointments  = React.memo(() => {


  const [data, setData] = useState([ ])
  // You not really need this lastIndex state for setting id for your data item, but somehow you want it after setData you can keep this and set to the last index of the item in fetched data
  const [lastIndex, setLastIndex] = useState(0)

  useEffect( () => {
    const fetchData = async() => {
      var response = await fetch('../data.json');
      var result = await response.json()
      var tempData = result.map( (item, index) => ({...item, id: index}))
      setLastIndex(tempData.length -1)
      setData(tempData)
    };
    fetchData();
  }, [])

    return (
      <div>
      </div>
    );
})
0 голосов
/ 20 июня 2020

Вам действительно нужен lastIndex?

Там data.length. Может использоваться внутри setData(lastData=>...)

...