如何在reactJS中初始化未知长度的数组状态？

Question

我遇到了一个奇怪的问题，我找到了答案，但我想知道幕后的原因。

我有一个react向服务器发送请求的组件，并在返回结果后将其设置为组件的状态。

class Featured extends React.Component{
constructor(props){
    super(props);
    this.state = {
        data : ['', ''],
        error: null,
    }
}
componentDidMount(){
    axios.get('/api/featured')
        .then(res=>{ 
            let dataClone = [2];
            console.log('before');
            res.data.map((dt,i)=>{
                dataClone[i] = dt;
            });
            this.setState({
                data : dataClone
            })
            })
        .catch(err=>{this.setState({error: err}); errorHandling(err)});
}
render(){
    if(!this.state.error){
        return(
            <div>data: {this.state.data[1].title}</div>
        )
    }
    else {
        return (<div className='text-center text-warning'>There is some error loading the featured</div>)
    }
}
}

这是发回的数据：

        {
            title : 'how to be a good programmer?',
            subtitle: 'I was wondering how can i be a good programer after 10 years experience',
            author : 'hamid mortazavi',
            date : new Date().toLocaleDateString(),
        },
        {
            title : 'Why are you alone?',
            subtitle: 'this is going to be a long story from here, but bear with me...',
            author : 'shahin ghasemi',
            date : new Date().toLocaleDateString(),
        }

这可以正常工作，但是如果我改变状态初始化的方式data，它就不起作用。例如这三种方法不起作用：

this.state = {
//1:
data : new Array(2),
//2:
data : [],
//3:
data : [2]
}

这些都不起作用，当我想展示时this.state.data[1].title，它不起作用，然后扔给我Uncaught TypeError: Cannot read property 'title' of undefined。让我惊讶的是显示没有问题this.state.data[0].title，看来问题出在索引上。

正如我现在所说的，我找到了解决方案，但我花了 1 个小时才解决。我只是想知道原因以及为什么？

Answer 1

这不是React的问题，而是数组项未定义的问题。

在您没有看到错误的第一个示例中，您实际上通过执行以下操作定义了状态数组中的 2 个项目的值

data : ['', ''],

这样，data[0] 和 data[1] 的值始终存在，除非由服务器的数据响应设置，否则将始终至少有一个空字符串值。

在第二个示例中，您的数据对象只是一个空白数组，其中没有项目 ([])、1 个项目 ([2]) 或 2 个项目 (new Array(2))。即使使用 new Array(2)，您的数据对象项也没有定义值。尝试在控制台中运行此命令：

x = new Array(2)
x[0] // will return undefined
x[1] // will return undefined