如何在对象中映射对象数组？答案

【问题标题】：How do you map an array of objects within an object?如何在对象中映射对象数组？
【发布时间】：2020-09-18 09:55:34
【问题描述】：

我试图在一个对象中映射一组对象，但我似乎无法让它工作。我的代码的目标是映射并显示“菜单”数组中的内容。

这是对象的结构（从状态登录到控制台）。

Object {
  "id": 1,
  "img": "https://cuisinederue.org/wp-content/uploads/2019/08/Greg2.png",
  "menu": Array [
    Object {
      "description": "Les prix sont défini à la tête du client",
      "name": "Greg's Burger",
      "price": 1,
    },
    Object {
      "description": "Les prix sont défini à la tête du client",
      "name": "Poutine double cheese bacon",
      "price": 1,
    },
    Object {
      "description": "Les prix sont défini à la tête du client",
      "name": "Cône de poulet pop corn et frites maison",
      "price": 1,
    },
    Object {
      "description": "Les prix sont défini à la tête du client",
      "name": "Grilled cheese Philly steak",
      "price": 1,
    },
    Object {
      "description": "Les prix sont défini à la tête du client",
      "name": "Poutine Philly cheese steak",
      "price": 1,
    },
    Object {
      "description": "Les prix sont défini à la tête du client",
      "name": "Boulette de mac'n'cheese",
      "price": 1,
    },
  ],
  "name": "Greg's dinner",
  "type": "SOUTHERN COMFORT",
}

这是我要开始工作的代码：（特别是details.menu.map 部分）


const Details = ({navigation, idTruck}) =>{
  const [details, setDetails] = useState([]);
  const [detailsDone, setDetailsDone] = useState(false);

  const getDetails = () => {  
    fetch("https://foodtrack-420kbc-lg.herokuapp.com/trucks/1").then(res => res.json()).then(resp => setDetails(resp));
  }

  if(!detailsDone)
  {
    getDetails();
    setDetailsDone(true);
  }
  console.log(details);
  return (
    <View style={styles.container}>
      <Header title='Details'></Header>
      <Image name="logo" style={styles.detailsImage} source={{uri: details.img}}></Image>
      <Text name="nom">{details.name}</Text>
      <Text name="style">{details.type}</Text>


        {


          details.menu.map(({description, name, price}) => 
            <View style={styles.container}>
              <Text name="nom">{name}</Text>
              <Text name="prix">{price}</Text>
              <Text name="desc">{description}</Text>
            </View>
          )
        }

    </View>
  )
}

我得到的错误是： TypeError: undefined is not an object (evaluating 'details.menu.map'

非常感谢任何帮助！

【问题讨论】：

改成这样details.menu.map((detail) =>和<Text name="nom">{detail.name}</Text>
@sibabratswain 遗憾的是我仍然遇到同样的错误。不过感谢您的建议！
您是否更改了价格和描述之类的名称对吗？
@sibabratswain 是的，我仍然收到 TypeError: undefined is not an object (evalating 'details.menu.map'
检查这个stackoverflow.com/a/45857744/9739044

标签： javascript arrays reactjs react-native

【解决方案1】：

你在控制 JS 异步方面有很大的问题。在开始学习 reactJS 之前，请先尝试理解它。一些异步函数：setTimeout、setInterval、Ajax（调用api），这里是小tut。从这一点开始，您不需要使用 detailsDone 状态。
使用 useEffect 仅调用 1 次 api 时的高性能。

const initValue = {
    id: 0,
    name: "",
    type: "",
    img: "",
    menu: []
}
const [details, setDetails] = useState(initValue); // init value is object, not array

React.useEffect(() => {
    fetch("https://foodtrack-420kbc-lg.herokuapp.com/trucks/1")
        .then(res => res.json())
        .then(resp => setDetails(resp));
}, []); // ensure call api run 1 time when this component render.

【讨论】：

你说得对，我的代码没有优化，但这并没有解决我的问题。感谢您的提示，我将研究更好地学习异步 JS！

【解决方案2】：

看起来您正在尝试映射 details.menu，但当组件最初加载时，details 是一个空数组，它没有属性 menu。

一种解决方法是有条件地渲染其他内容（如加载指示器），直到数据设置为组件状态。

【讨论】：

谢谢，我最终使用了这个和最佳答案的组合！