shouldComponentUpdate не работает, когда добавлена ​​дополнительная проверка? - PullRequest
Новая
       6

shouldComponentUpdate не работает, когда добавлена ​​дополнительная проверка?

0 голосов
/ 14 марта 2020

Я новичок в реакции, и я пытался создать приложение для заметок, и, наконец, пришло время, когда я применил странный метод shouldComponentUpdate, чтобы проверить, не совпадают ли значения предыдущих реквизитов и состояния, и если памятка не определяется как пустое.

Все работает нормально, но когда я добавил, что если заметка не пуста, btn save перестает работать!

Вот мой компонент заметки 

class Note extends React.Component {
    constructor(props){
        super(props)
        this.edit = this.edit.bind(this)
        this.remove = this.remove.bind(this)
        this.save   = this.save.bind(this)
        this.randomBetween = this.randomBetween.bind(this)
        this.state    = {editing:false}

    }


    shouldComponentUpdate (newProps,newState){
        return (newProps.children !== this.props.children || newState !== this.state)

    }

    edit(e){
        this.setState({editing:true})
    }
    remove(e){
        e.preventDefault()
        this.props.remove(this.props.id)
    }

    save(e){
        e.preventDefault()
        var newText = this.NoteInput.value
        this.props.update(this.props.id,newText)
        this.setState({editing:false})

    }

    formDisplay(){
        return (
            <div className='note' style={this.style}>
                <form>
                <input type="text" className="note-input" ref={input => this.NoteInput = input} defaultValue = {this.props.children}></input>
                <button onClick={this.save}>save</button>
                </form> 
            </div>
        )
    }
    noteDisplay(){
        return (
            <div className="note" ref = {note => this.note = note} style={this.style}>
                <p>{this.props.children}</p>
                <span>
                    <button className="edit" onClick={this.edit}>edit</button>
                    <button className="remove" onClick={this.remove}>remove</button>
                </span>     
            </div>
        )
    }

    render() {
        return this.state.editing ? this.formDisplay() : this.noteDisplay()
    }


}

Все этого кода работает нормально, но когда добавить этот код в "shouldComponentUpdate", он не работает 

shouldComponentUpdate (newProps,newState){
        return ((newProps.children !== this.props.children || newState !== this.state) && newProps.children !== "")

    }

Это в основном добавляет дополнительную проверку, которая говорит, что если newprop.children равен "", это означает, что если новый текст пуст, тогда не обновляйте

Когда я нажимаю кнопку сохранения с этим фрагментом кода. Ничего не происходит, он не отображает заметку с ее предыдущими данными, как это было раньше. Что здесь не так?

...