为什么道具在状态更新时不更新?

时间:2019-05-16 01:31:40

标签: javascript reactjs

我正在将一个组件的状态作为道具传递给另一个组件。当该状态正在更新时,它似乎并没有在更新相应的道具。

我已经尝试了很多方法,例如将其放入return函数中并更新“低级”组件状态作为道具,但似乎没有任何效果。

这是构造函数

class Test extends Component{
    constructor(props){
        super(); 
        this.state = {
            testing:false,
            hitWall:false,
            outTime:false,
            outBounds:false,
            youWon:false

        }
        this.maze=[]
    }

这是状态更新的地方:

    attemptMaze = () => {
        this.setState({
            testing:true
        })
    }

这是我使用该事件监听器构建事物的地方:

      return (
          <div className="holderDiv">
        <div onMouseOver={(this.state.testing) ? this.outOfBounds:undefined} className="outOfBounds"></div>
        <div onMouseOver={(this.state.testing) ? this.outOfBounds:undefined} className="outOfBoundsTwo"></div>
        <div onMouseOver={(this.state.testing) ? this.outOfBounds:undefined} className="outOfBoundsThree"></div>
        <form onSubmit={this.state.testing?this.handleSubmit:undefined}>
        <button onClick = {this.state.testing?this.submitMaze:this.didntStart} type="submit" className="finishMaze" style={{'display':this.state.submitShowing}}>Submit Maze</button>
        <div className="grid">
        {this.state.maze}
        </div>
        </form>

        <button type="submit" onClick={this.attemptMaze} className="startEndButton" style = {{'fontSize':'30px'}}>Attempt Maze</button>
        <h1 className="displayName">{this.state.name}</h1>
        <TimerTwo />
        </div>

这是我要构建“下部”组件(正方形)的地方

getMaze = async (e) => {
        const mazeResponse = await fetch(`/maze/test/${this.props.match.params.testId}`)

        const parsedResponse = await mazeResponse.json();
        console.log(parsedResponse.data,'<----parsedResponse.data')
        testMaze = parsedResponse.data.maze;
        testName = parsedResponse.data.name
        console.log(testMaze)
        this.setState({
            name:testName,
            maze:
            testMaze.map((element)=>{
            return <div><Square hit ={this.hit} testing={this.state.testing} className="cell" color={element=="1"?'black':null} style={{'height':'5px','width':'5px','backgroundColor':element==1?'black':'white','margin':0}}></Square></div>
        }
        )
    })

    }

这是我渲染下部组件的地方

render(){
        return(
            <div className="boxes" onMouseOver = {this.props.testing?this.switchColor:undefined} style={{'height':'5px','width':'5px','backgroundColor':this.state.color,'margin':'0'}}>
            </div>
        )
    }

我似乎无法做到使switchColors在“ testing”为true时运行,而在“ testing”为false时不运行。这是我似乎无法在该项目中管理的最后一个错误。任何帮助表示赞赏。

1 个答案:

答案 0 :(得分:0)

  1. 尝试将button type="submit"替换为button type="button",以避免不必要的表单提交。

  2. 在所有事件处理程序中包括一个console.log语句,以确保它们被调用。您可能对react事件属性或事件处理程序有错别字。