为什么 State 只有在变量赋值时才会消失？

Question

我对正在制作的文件库进行了非常简单的设置，其中涉及一个主组件和两个子组件。图像预览当然有左箭头和右箭头，传递并传回一个创造性地称为“clickHandler”的函数，它只更新正在查看的文件的状态。

但是，当调用 clickHandler 事件并创建一个临时变量来修改并发送回状态时，应用程序会因 _this.state.activeFile is not a function 错误而崩溃。

然而，奇怪的是状态是完全可读的。它可以 console.log() 完美地输出，只有在尝试 将其分配给一个变量进行修改时 才会出错。

这是通过良好的子组件：

<FileView 
    file={this.props.media[this.state.activeFile]} 
    handler={this.clickHandler} 
    active={this.state.activeFile} 
    max={this.props.media.length}
/>

更多详情：https://i.imgur.com/BGNqtp7.png

这里是调用方法的地方。

state={
    activeFile: 2
}
clickHandler=(direction)=>{
    console.log (this.state); // > Object { activeFile: 2 }
    console.log (this.state.activeFile); // > 2
    let temp =  (this.state.activeFile) //  TypeError: _this.state.activeFile is not a function

    // vvv Likely unrelated, but posted also for context
    // evals left or right to plus or minus
    (direction==="prev"?temp-=1:(direction==="next"?temp+=1:""))
    this.setState({activeFile: temp})
}

更多详情：https://i.imgur.com/okvE7T3.png

如您所见，数据存在且可读，但不可分配。我从来没有见过这样的事情，并且尝试了无数解决方案，例如 this.state["activeFile"] 无济于事。

这个真的让我陷入困境，感谢您提前提供的帮助！

内容-非专业的Codepen原型演示：

https://codepen.io/Jop/pen/vvJrqv

Answer 1

您可以查看此内容。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

<FileView handler={this.clickHandler.bind(this)} />

Answer 2

当你想根据前面的值修改状态时，不建议直接在setState函数中使用this.state.[x]，容易出现bug。

推荐的方法是使用 this.setState(prevState => ({ })) 并使用 previousState 中的变量。

此外，从您的函数中发送 -1 和 1 可以更容易处理：

媒体查看器：

clickHandler = offset => event => {
    this.setState(prevState => ({ activeFile: prevState.activeFile + offset }))
}

活动文件：

<div className="info-view_paging">
    {props.active < 1 ? <div></div> : <div className="info_pager" onClick={props.handler(-1)}><button>previous</button></div>}
    <div></div>
    {props.max > props.active ? <div className="info_pager" onClick={props.handler(1)}><button>next</button></div> : <div></div>}
</div>

Answer 3

这不是react，而是javascript！有错误的代码，你这样贴：

let temp =  (this.state.activeFile) //  TypeError: _this.state.activeFile is not a function

// vvv Likely unrelated, but posted also for context
// evals left or right to plus or minus
(direction==="prev"?temp-=1:(direction==="next"?temp+=1:""))

但是由于语法的工作方式，javascript 将其视为

let temp = (this.state.activeFile)(direction==="prev"?temp-=1:(direction==="next"?temp+=1:""))

你看它是如何认为它现在需要一个功能的；）如果将其重写为

let temp =  this.state.activeFile;

if (direction === "prev") {
  temp -= 1;
} else if (direction === "next") {
  temp += 1;
}

它应该有效:)

Answer 4

您遇到错误是因为代码被解释为

let temp = (this.state.activeFile)(direction==="prev"?temp-=1:(direction==="next"?temp+=1:""))

因此在 ternary 函数前添加分号或使用 else if 语句。两者都应该有效

 clickHandler=(supdawg)=>{
    let temp = (this.state.activeFile);
    (supdawg==="left" ? temp-=1 : (supdawg==="right") ? temp+= 1 : "");
    this.setState({activeFile: temp});
}

或

clickHandler=(supdawg)=>{
    let temp = (this.state.activeFile)
    if (supdawg === "left") { temp -=1}
    else if (supdawg === "right") { temp+=1}
    else {temp = ""}
    this.setState({activeFile: temp})
}

为什么 State 只有在变量赋值时才会消失？

Why does State disappear only upon variable assignment?

javascript

reactjs

web

react-dom