Блог

Кто-нибудь знает, почему мои данные не отображаются, это консоль.регистрирует ‘x [0]’, ‘x [1]’, ‘x [2]’ и ‘x[3]’ нормально в моем операторе return. Я довольно новичок в react и программировании в целом, поэтому понятия не имею, почему это не работает.

Я бы просто ожидал, что он заполнит строки таблицы, подобные 2, которые я закодировал вручную.

 import React, { useState, useEffect } from 'react'
import "./stylesheets/oddsmatcher-table.css"


const App = () => {
    const [wow, setWow] = useState([])
    
    useEffect(() => {
        fetch(DATA)    
            .then(res => res.json())
            .then(data => {
                const newData = data.data.slice(0, 10)
                
                const k = newData.map(x => {
                    return [x.date, x.event_name, x.bookmaker_name, x.exchange]
                })
    
                setWow(k)
                console.log(k)
            })
    }, [])
    
    
    return(
        <table>
            <tbody>
                <tr>
                    <th>Date</th>
                    <th>Event</th>
                    <th>Bookie</th>
                    <th>Exchange</th>
                </tr>
                <tr>
                    <td>25-09-2020</td>
                    <td>Man United vs Liverpool</td>
                    <td>Bet365</td>
                    <td>Smarkets</td>
                </tr>
                <tr>
                    <td>26-09-2020</td>
                    <td>Arsenal vs Man City</td>
                    <td>Coral</td>
                    <td>Betfair Exchange</td>
                </tr>
                {wow.forEach(x => {
                    return(
                        <tr>
                            <td>{x[0]}</td>
                            <td>{x[1]}</td>
                            <td>{x[2]}</td>
                            <td>{x[3]}</td>
                        </tr>
                    )
                })}
            </tbody>
        </table>
    )
}

export default App
  

Обновление: попробуйте переключиться wow.forEach на это:

 {wow.map((x, index) => {
  return (
    <tr key={index}>
      {x.map((dataPiece) => (
        <td key={dataPiece}>{dataPiece}</td>
      ))}
    </tr>
  );
})}
  

Вот Codesandbox, который я использовал для тестирования. Я заменил вашу асинхронную выборку глобальной переменной на то, как, по моему мнению wow , выглядят ваши данные:
https://codesandbox.io/s/suspicious-glitter-mf0tg ?fontsize = 14amp; hidenavigation = 1amp;theme = темный

Дайте мне знать, если это сработает. Если это не так, можете ли вы опубликовать пример того, как выглядят ваши извлеченные данные?