хотя извлекаемые данные преобразуются в массив, я не могу получить доступ к этим элементам - PullRequest
Новая
       20

хотя извлекаемые данные преобразуются в массив, я не могу получить доступ к этим элементам

1 голос
/ 08 января 2020

После извлечения некоторой даты из внешнего API с использованием этого кода 

let fetchedData = [];

fetch(api)
    .then(res => res.json())
    .then(res => JSON.parse(res.response))
    .then(arr =>  arr.map(e => fetchedData.push(e)) )
    .catch(err => err);

fetchedData заполняется без каких-либо проблем, в этот момент данные внутри выглядят так: 

    {
        Key: '0',
        Record: {
            a: 'a0',
            b: 'b0'
        }
    },
    {
        Key: '1',
        Record: {
            a: 'a1',
            b: 'b1'
        }
    },
    {
        Key: '2',
        Record: {
            a: 'a2',
            b: 'b2'
        }
    }

для * Инструменты 1008 * chrome отображают что-то вроде этого: 

[]
0: {Key: "0", Record: {…}}
1: {Key: "1", Record: {…}}
2: {Key: "2", Record: {…}}
length: 3
__proto__: Array(0)

, но если я хочу получить доступ к этому массиву и извлечь его, как console.log(fetchedData[0]), тогда я показываю как undefined или console.log(fetchedData.length) показывает 0

, но в том же сценарии следующий вызов console.log(fetchedData) показывает обычный массив, как ранее

, в результате в chrome инструментах у меня есть 

array
undefined
array

с использованием кода, упомянутого ранее

Ответы [ 2 ]

2 голосов
/ 08 января 2020

Причина, по которой это происходит, заключается в том, что вы выполняете асинхронную операцию, fetch возвращает обещание, поэтому asyn c означает, что он будет выполняться после выполнения кода syn c: в этом примере он будет выполняться после выполнения js let fetchedData = []; , если это имеет смысл.

Чтобы справиться с этой ситуацией, вы можете вызвать эту операцию извлечения внутри js componentDidMount() {} или js useEffect(() => {})

Это пример, но попробуйте @wokadakow со своими данными и проверьте результат! 


function App() {
  const [data, setData] = useState([]);

  async function AsyncData() {
   // Here goes your async data, just replace it 
// this is fake data 
    return await [{
      id: 1,
      name: 'john'
    }]
  }

  useEffect(() => {
    AsyncData()
    .then((data) => setData(data))

  }, [])


  return (
    <div className="App">
      <h1> TEST DATA </h1>
      <ul>
        {data.map(d => {
           return <li key={d.id}> {d.name} </li> 
      })}
      </ul>

    </div>
  )
}

render(<App />, document.getElementById('root'));

Надеюсь, это поможет!

0 голосов
/ 08 января 2020

Вам придется подождать, пока ваша выборка не будет завершена, либо с помощью async/await, либо путем добавления вашего вызова console.log в другой метод then: 

let fetchedData = [];

fetch(api)
    .then(res => res.json())
    .then(res => JSON.parse(res.response))
    .then(arr =>  arr.map(e => fetchedData.push(e)) )
    .then(arr =>  console.log(arr) )
    .catch(err => err);
...