Я не понимаю, как сделать объекты (реагировать)

Question

Я получаю объект из "api" и устанавливаю его на совпадение, но когда я пытаюсь выполнить цикл или выполнить рендеринг, я получаю ошибку.

Я попробовал Objct.keys, возможно, мой синтаксис неправильный, я не уверен, что я все еще учусь за любую помощь.

const [match, setMatch] = useState();
const [search, setSearch] = useState('');
const [query, setQuery] = useState(4749875544)

useEffect(() => {
    getData();
}, [query]);
const getData = async () => {
    const response = await 
fetch(`https://api.opendota.com/api/matches/${query}`)
    const result = await response.json();
    setMatch(result);
}   
}
return (
    <div className="App" >
        <form onSubmit={getSearch}
            className="search-form">
            <input className="search-bar"
                type="text"
                value={search}
                onChange={searchInput}
            />
            <Button as="input"
                type="submit"
                value="Submit" />
        </form>
        <li>
        {
      Object.keys(match).map((oneKey,i)=>{
        return (
            <li key={i}>{match[oneKey]}</li>
          )})
        }
        </li>
    </div>
)}

Answer 1

Сначала я бы по умолчанию установил состояние объекта. Всегда полезно по умолчанию ваше состояние для типов данных, которые вы будете использовать. Так что наверху используйте State ({}).

React не может отобразить объект. Вы должны визуализировать каждый ключ отдельно. На вашей карте, когда вы возвращаете элемент списка, сделайте это с match [oneKey] .title или любым другим ключом, который является действительным.