时间戳

首页 > 解决方案 > 我不明白如何渲染对象（反应）

reactjs - 我不明白如何渲染对象（反应）

问题描述

我从“api”获取一个对象并将其设置为匹配但是当我尝试循环或渲染它时出现错误。

我已经尝试过 Objct.keys 也许我的语法是错误的，我不确定我是否还在学习 thx 以获得任何帮助。

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>
)}

标签： reactjsloopsobject

解决方案

首先，我会将状态默认为对象。将您的状态默认为您将使用的数据类型总是好的。所以在顶部使用状态（{}）。

React 无法渲染对象。您必须分别渲染每个键。在您的地图中，当您返回列表项时，请使用 match[oneKey].title 或任何实际有效的键。

推荐阅读