我不明白如何渲染物体（反应）

Question

I am getting a object from "api" and set it to match but when i try do loop through or render it i get a error.

I have tryed Objct.keys maybe my syntax is wrong im not sure im still learning thx for any help.

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

First I would default the state to an Object. It is always good to default your state to the data types you will use. So at the top useState({}).

React can't render an object. You have to render each key separately. In your map when you return the list item do it with match[oneKey].title or whatever key is actially valid.