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没问题，而且看来是索引。

正如我现在所说，我找到了解决方案，但是花了我一个小时才能解决。我只想知道原因和原因？

Answer 1

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

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

data : ['', ''],

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

在第二个示例中，您的数据对象只是一个空数组，其中没有项目（[]），1个项目（[2]）或2个项目（new Array（2））。即使有了新的Array（2），您的数据对象项也没有定义值。尝试在控制台中运行它：

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

Answer 2

在无法正常工作的情况下，请将初始state.data设置为空数组（或者在最后一种情况下，将其设置为其中一个数字为2的数组）。调用this.state.data[1].title时，您尝试访问的是undefined上的属性，这会给您一个零点错误。

在对您有用的情况下，您正在尝试访问空字符串中的属性title，该字符串将是未定义的，但不会出错，因为您正在尝试查找标题（空字符串）的定义不是不确定的。

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

2 个答案: