Question

我正在尝试在一个对象内映射一个对象数组，但似乎无法正常工作。我的代码的目标是映射然后显示“菜单”数组中的内容。

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

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'

非常感谢您的帮助！

Answer 1

您在控制JS异步方面遇到了大问题。在开始学习reactJS之前，请先尝试理解它。一些异步函数：setTimeout，setInterval，Ajax（调用api），这里是小的tut。从这一点来看，您不需要使用detailsDone状态。
使用useEffect仅调用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.

Answer 2

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

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

您如何在对象内映射对象数组？

2 个答案: