Question

如何将推送的数组数据带到函数之外，每件事都是在点击功能中工作正常。但是当我试图在外面打印时函数console.log(this.state.selectedSchedule[0].storeName)，它是抛出错误：

无法读取属性＆＃39; storeName＆＃39;未定义的。

代码：

this.state = {
    selectedSchedule:[]
};

click(e){
    console.log('e',e);
    document.getElementById("detailView").style.display="block";
    this.state.selectedSchedule=[];
    for(let i=0;i<this.scheduless.length;i++){
        if(this.scheduless[i].scheduleId === e){
            this.state.selectedSchedule.push(this.scheduless[i]);
            break;
        }
    }
    console.log('cheudkl',this.state.selectedSchedule);
    this.setState=({
        selectedSchedule:this.state.selectedSchedule
    });
    console.log(this.state.selectedSchedule[0]);
    console.log(this.state.selectedSchedule[0].storeName) //printing
};

//html render
render(){
    console.log(this.state.selectedSchedule[0].storeName) // here it's throwing me the error(not printing)
}

Answer 1

原因是，this.state.selectedSchedule的初始值为[]，并且在初始渲染期间，您尝试获取第0项的storeName，并在此时清除第0次不存在所以

this.state.selectedSchedule[0] ===> 未定义

您正试图从undefined获取值，这就是它抛出错误的原因。只需在打印值之前检查长度。

像这样：

render(){

    // now it will print the values once some item will be added 
    if(this.state.selectedSchedule.length)
       console.log(this.state.selectedSchedule[0].storeName);

    return (....)
}

另一个问题是您更新状态值的方式。

<强>的变化：

1-永远不要直接改变 state 值，将this.state视为不可变。

2- setState 是一项功能，因此我们需要将其称为this.setState({})。

这样写：

click(e){
    document.getElementById("detailView").style.display="block";

    let arr = [];

    arr = this.scheduless.filter(el => el.scheduleId === e);

    this.setState({
        selectedSchedule: arr
    });
};

Answer 2

这不是更新状态的正确方法

this.setState=({
    selectedSchedule:this.state.selectedSchedule
});

您需要将其编辑为：

if(this.scheduless[i].scheduleId === e){
    this.setState({selectedSchedule:[...this.state.selectedSchedule, this.scheduless[i]]});
    break;
}

您需要设置状态，然后再次调用渲染函数，并且您对状态变量的更改将是可见的。

Answer 3

您不应该改变状态，push正在改变array，您正在重新分配state函数click中的this.state = ...对象。

相反，请使用内置setState method of react来更新它：

this.setState({key: value});

对于数组，您可以使用ES6 spread operator添加项目而不会改变它：

const nextState = [...this.state.selectedSchedule, newValue];
this.setState({selectedSchedule: nextState });

修改
正如Mayank Shukla所提到的，除了这个解决方案，你应该检查你的数组的长度是否大于0：

this.state.selectedSchedule.length > 0 && console.log(this.state.selectedSchedule[0].storeName);

在第一个render调用中，此数组为空，因此其长度为0.

Answer 4

你永远不应该改变状态（直接改变this.state的内容）。

也就是说，不是将空数组分配给状态的一部分，而是为每个项目分配push，而是创建一个新数组：

const selectedSchedule = this.scheduless.filter(schedule => schedule.scheduleId === e)
this.setState({selectedSchedule});

数据不会出现在reactjs的函数之外

4 个答案: