Javascript 从状态数组获取特定值时未定义-React Native

我正在从firestore读取数据，并将其存储在对象的状态数组中

当我

console.log（this.state.array）

它返回包含所有对象数据的整个数组，但当

console.log（this.state.array.name）

或

console.log（this.state.array[0]）

它返回未定义的

我试着用计算机获取数据

forEach

循环，但它似乎不工作，以及

    constructor(props) {
        super(props);
        this.state = { tips: [] };
    }

    componentDidMount() {
        firebase.firestore().collection('pendingtips').get()
            .then(doc => { 
                doc.forEach(tip => { 
                    this.setState([...tips], tip.data()); 
                    console.log(this.state.tips);
                }); 
            })
            .catch(() => Alert.alert('error'));
    }

    renderTips() {
        console.log(this.state.tips); //returns the whole array as expected
        console.log(this.state.tips[0].name); //returns undefined
        return this.state.tips.map(tip => <PendingTip key={tip.tip} name={tip.name} tip={tip.tip} />); //return null because tip is undefined
    } 
   render() {
        return (
            <View style={styles.containerStyle}>
                <ScrollView style={styles.tipsContainerStyle}>
                    {this.renderTips()}
                </ScrollView>
            </View>
        );
    }

因此，我希望这个.state.tips[0]。名称将是“X”，而不是未定义的

---

提前感谢。

firesore

请求是异步的，所以当您的请求得到执行时，您的组件就被挂载了，因此您在控制台中的状态就没有定义

您必须在

componentDidMount

中执行API调用，而不是

componentWillMount

像这样改变/改变状态，不会触发组件的重新渲染，组件也不会获得最新数据

doc.forEach(tip => { 
      this.state.tips.push(tip.data()); 
      console.log(this.state.tips);
}); 

您必须使用

setState

更改状态，这样您的组件将重新渲染，并且您始终拥有最新的数据

componentDidMount(){
  firebase.firestore().collection('pendingtips').get()
     .then(doc => { 
         const tipsData = doc.map(tip => tip.data());
         this.setState({tips:tipsData},() => console.log(this.state.tips));
     })
     .catch(() => Alert.alert('error'));
}

调用

renderTips

函数时，确保状态数组中有数据

{this.state.tips.length > 0 && this.renderTips()}

首先，您应该在

componentDidMount

中获取数据，而不是

componentWillMount

其次，你应该使用

this.setState

来更新你的状态，而不是直接改变它

componentDidMount（）{
火基
.firestore（）
.托收（“未决托收”）
.get（）
。然后（docs=>{
const tips=docs.map（doc=>doc.data（））；
this.setState（{tips}）；
})
.catch（（）=>Alert.Alert（“错误”））；
}

我发现问题在于JavaScript将数组保存为对象。 例如，此阵列：

[ 'a' , 'b' , 'c' ]

等于：

{
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
}

“当您尝试访问索引0处的数组值时，会得到未定义的值，但这并不是说未定义的值存储在索引0处，而是JavaScript中的默认行为是，如果您尝试访问不存在的键的对象值，则返回未定义的值。”

---

您能否在BikPoint中共享此阵列的打印屏幕？能否向我们展示您的渲染方法？不是

renderTips

将其更改为ComponentDidMount，但主要问题是状态数组，this.state.array.push（对象）实际上对我有效。问题是我无法正确地从状态数组中获取数据，因此无法正常工作。。。将我直接传递给.catch将其更改为ComponentDidMount，但主要问题是状态数组，this.state.array.push（对象）实际上对我有效。问题是我无法从状态数组proparlyYou可以这样做，

{this.state.tips.length>0&&this.renderTips（）}

What console.log（this.state.tips）的打印？还可以尝试在API响应中打印

doc

。

{
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
}