Reactjs 在React Native useState中初始化数组

我正在开发一个react本机应用程序

我得到的SQL查询结果如下：

const [ food, setFood ] = useState([]);

const load_food = async () => {
    db.listProduct().then(row => setFood(row))
};
useFocusEffect( () => { load_food(food) }, [ food ] );

console.log(food[i].PRODUCTNAME)

如果我做这样的日志：

const [ food, setFood ] = useState([]);

const load_food = async () => {
    db.listProduct().then(row => setFood(row))
};
useFocusEffect( () => { load_food(food) }, [ food ] );

console.log(food[i].PRODUCTNAME)

我得到了我的配料名称：

"Orange Juice"

稍后我想从变量food创建一个列表

const [listData, setListData] = useState(
    Array(10)
        .fill('')
        .map((_, i) => ({ key: `${i}`, text: `Product name: ${food[i].PRODUCTNAME}`}))
);

但我有以下错误：

undefined不是对象（正在评估'food[i].PRODUCTNAME'）

---

我想这是一个同步问题。但是我不知道如何解决它，你基本上是正确的，这可能是一个同步问题，你可以使用一些技术来避免它，

useffect

就是其中之一

const [listData, setListData] = useState([]);
useEffect(()=> {
  setListData(
    Array(10)
        .fill('')
        .map((_, i) => ({ key: `${i}`, text: `Product name: ${food[i].PRODUCTNAME}`}))
  )
}, [food]);

---

这只会在

食品

更新时设置

列表数据

状态，但您必须检查

食品

至少有10个项目，否则您将再次得到未定义的项目

这似乎有效，谢谢！我将数组大小设置为'food.length'，在这种情况下我不应该有错误