Question

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

2020-05-30

117

javascript arrays reactjs react-native

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

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

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：未定义不是对象（评估“details.menu.map”

任何帮助都非常感谢！

Answer 1

你在控制 JS 异步方面有很大的问题。在开始研究 reactJS 之前，请先尝试理解它。一些异步函数：setTimeout、setInterval、Ajax（调用 api），这里有一个小的教程。从这一点开始，你不需要使用 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.

Answer 2

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

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