Javascript 控制台显示状态中的数组已填充，但我可以'；无法访问对象[0]

---

我感觉这与react渲染周期有关，但我不知道是什么。非常感谢您抽出时间查看我的问题。

您是否尝试过在类

构造函数

方法中初始化您的状态？这样，在第一次尝试渲染之前，将使用默认值初始化类的状态：

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            allEvents: [],
            allArtists: []
        };
    }

    ...
    ...
}

此外，我同意George Chanturidze关于使用

componentDidMount

生命周期方法而不是

componentWillMount

的评论

更新：在复制问题的尝试失败时添加了一个片段

类应用程序扩展了React.Component{
状态={
协议：[]，
ES6阵列：[]，
pushArray:[]
};
组件将装入=（）=>{
var concat=this.state.concatArray.concat({
名称：“A_concat”，
价值：1
})康卡特先生({
名称：“B_concat”，
价值：2
});
this.state.pushArray.push({
名称：“C_push”，
价值：3
});
this.state.pushArray.push({
名称：“D_push”，
价值：4
});
这是我的国家({
concatArray:concat，
es6Array:{…this.state.es6Array，
...[{
名称：“E_es6”，
价值：5
}, {
名称：“F_es6”，
价值：7
}]
}
});
};
渲染=（）=>{
console.clear（）；
console.log（this.state）；
console.log（this.state.concatArray）；
console.log（this.state.concatArray[0]）；
console.log（this.state.pushArray）；
console.log（this.state.pushArray[0]）；
console.log（this.state.es6Array）；
console.log（this.state.es6Array[0]）；
返回null；
};
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）

您是否尝试过使用componentDidMount而不是componentWillMount？我相信componentWillMount正在被弃用。查看其全部内容，因为调用渲染的时间。只是为了测试。使用
setTimeout
并延迟200-500毫秒，然后查看结果。各位，感谢检查我的代码。我尝试了你们的建议，但没有太大变化，还有其他建议吗？？？@hannadrehman您想让我在render（）函数上设置一个setTimeout吗？请以文本形式添加代码，而不是代码图像。
fetchAllArtists
/
fetchAllEvents
是否异步？控制台不反映您记录这些内容时的状态。相反，只有当你展开它时才会对它进行评估（见蓝色图标）。嗨，伙计们，谢谢你们检查我的代码。我尝试了你们的建议，但没有什么变化，还有其他建议吗？@RuairidhGrass。我在我的答案中添加了一个片段，以便在使用[0]为第一个数组项编制索引时重现“未定义”的结果。我尝试镜像您的代码的相关部分，例如在使用类构造函数之外初始化状态和保留componentWillMount。在我的例子中，我的三个console.log语句似乎都按预期工作，包括记录状态、记录整个数组以及记录第一个数组项。你是否能够提供一个片段来重现这个问题，或者可能包含更多可能适用的代码？嗨@Kevin，我非常感谢你的努力！我认为问题可能在于我的
fetchAllArtists（array）
方法。它是一种从firebase数据库获取数据，然后用该数据填充数组的方法。该函数存在于一个单独的js文件中，以保持代码的干燥。这就是所说的函数的样子：
const fetchAllArtists=（array）=>{firebaseArtists.once（“value”）。然后（（snapshot）=>{const-artists=firebaseLooper（snapshot）；array.push（…artists）；}）
@RuairidhGrass我仍然无法准确复制“未定义”的内容，但是我知道您应该避免通过使用array.push（）方法来改变数组，而是使用this.setState将新数组传递给各自的状态属性。这在这里的一些顶级答案中得到了更好的解释：。我更新了我的示例，包括如何使用Array.concat（）方法以及ES6语法来处理这个问题。我还使用了Array.push（）来重现这个问题，但失败了。嘿@kevin，我已经发布了一个答案，下面是它的一些图片。谢谢