Javascript 在react中循环通过对象

学习反应

试图从返回json对象并显示它的API调用循环遍历对象，但很难实现它

这是应该呈现它的组件

    export default class ProfilePage extends Component {
  constructor() {
    super();
    this.state = { data: '' };
  }

  mapObject(object, callback) {
    return Object.keys(object).map(function (key) {
        return callback(key, object[key]);
      })

  }

  async componentDidMount() {
    const response = await fetch(`https://indapi.kumba.io/webdev/assignment`);
    const json = await response.json();
    // console.log(json)
    this.setState({ data: json });
    
  }

  

  render() {
    const data = this.state.data
    console.log(data)
    return (
      <div className="row">
          {Object.values(data).map(data => {
              <div key={key}>
                {data[key]}
              </div>
          })

          }
         Woerkkk please
    </div>
    
    );
  }
}

导出默认类概要文件页面扩展组件{
构造函数（）{
超级（）；
this.state={data:''}；
}
mapObject（对象，回调）{
返回Object.keys（对象）.map（函数（键）{
返回回调（key，object[key]）；
})
}
异步组件didmount（）{
const response=等待获取(`https://indapi.kumba.io/webdev/assignment`);
const json=await response.json（）；
//console.log（json）
this.setState（{data:json}）；
}
render（）{
const data=this.state.data
console.log（数据）
返回(
{Object.values（data）.map（data=>{
{data[key]}
})
}
沃尔克
);
}
}

我得到的只是一个空白屏幕

---

在控制台中，我得到一个错误：未定义“key”no undef

渲染方法的映射中缺少一个return语句。 编辑：未从Object.values返回键

使用返回语句重新配置，如下所示：

{Object.keys(data).map(key => {
          return (<div key={key}>
            {data[key]}
          </div>);
      })

{Object.keys（data.map）（key=>{
返回(
{data[key]}
);
})

或者，您也可以使用括号从arrow函数隐式返回

{Object.keys(data).map(key => (
          <div key={key}>
            {data[key]}
          </div>)
      ))

{Object.keys（data.map）（key=>(
{data[key]}
)
))

映射中缺少渲染方法的返回语句。 编辑：未从Object.values返回键

使用返回语句重新配置，如下所示：

{Object.keys(data).map(key => {
          return (<div key={key}>
            {data[key]}
          </div>);
      })

{Object.keys（data.map）（key=>{
返回(
{data[key]}
);
})

或者，您也可以使用括号从arrow函数隐式返回

{Object.keys(data).map(key => (
          <div key={key}>
            {data[key]}
          </div>)
      ))

{Object.keys（data.map）（key=>(
{data[key]}
)
))

使用

Object.values（myObj）

可以将所有对象值作为一个数组来获取。因此，使用此数组，可以迭代数组并显示项目，如下所示：

{Object.values(myObj).map(value => <p>{value}</p>)}

{Object.values（myObj.map）（value=>{value}
）}

迭代时不要忘记使用

key

prop。

使用

Object.values（myObj）

可以将所有对象值作为一个数组。因此，使用此数组，可以在数组上迭代并显示项目，如下所示：

{Object.values(myObj).map(value => <p>{value}</p>)}

{Object.values（myObj.map）（value=>{value}
）}

---

迭代时不要忘记使用

键

道具。

您可以使用useState和useEffect来获取对象数据

const-App=（）=>{
常量[objData，setObjData]=useState（{}）；
const[objItems，setObjItems]=useState（[]）；
常量fetchObj=async（）=>{
const response=等待获取(`https://indapi.kumba.io/webdev/assignment`);
const data=wait response.json（）；
setObjData（数据）；
setObjItems（数据项）；
}
useffect（（）=>{
fetchObj（）
},[]);
返回(
订单Id:{objData.Order\u Id}
//或任何其他objData密钥
项目：

{
objItems.map（（i，idx）=>{
返回(
名称：{i.Name}，类别：{i.Category}，价格：{i.Price}，货币：{i.Currency}
)
})
}

)
}
导出默认应用程序；

您可以使用useState和useEffect获取对象数据

const-App=（）=>{
常量[objData，setObjData]=useState（{}）；
const[objItems，setObjItems]=useState（[]）；
常量fetchObj=async（）=>{
const response=等待获取(`https://indapi.kumba.io/webdev/assignment`);
const data=wait response.json（）；
setObjData（数据）；
setObjItems（数据项）；
}
useffect（（）=>{
fetchObj（）
},[]);
返回(
订单Id:{objData.Order\u Id}
//或任何其他objData密钥
项目：

{
objItems.map（（i，idx）=>{
返回(
名称：{i.Name}，类别：{i.Category}，价格：{i.Price}，货币：{i.Currency}
)
})
}

)
}
导出默认应用程序；

这是非常正确的一点，但没有解决使用未声明变量

key

的基本问题。@Robin。我将更新我的答案，谢谢。能够修复它这是非常正确的一点，但没有解决未声明变量

ke的基本问题正在使用y

。@Robin。我将更新我的答案。谢谢。能够修复它。是否要循环处理响应中的项？循环处理对象本身似乎不太合乎逻辑。请尝试使用{data.key}而不是{key}是否要循环处理响应中存在的项？循环处理对象本身似乎不太合乎逻辑。请尝试使用{data.key}而不是{key}嗨，这很有效，但当我要渲染或循环处理“项”时这是一个带有json响应的对象数组，i get Error无法读取未定义的属性“2”对于对象或对象中存在的任何数组，您可以为这样的项目创建一个新状态并获取它（更改代码）：嗨，它工作了，但当我想渲染或循环“项目”时这是一个带有json响应的对象数组，i get Error无法读取未定义的属性“2”。对于对象或对象中存在的任何数组，您可以为此类项创建一个新状态并获取它（更改代码）：