Состояние изменено, но компонент не перезагружается - PullRequest
0 голосов
/ 16 апреля 2020

У меня есть кнопка Refre sh, которая должна изменить состояние в Компоненте, и она должна повторно обработать его дочерний компонент Excercise. Состояние меняется, я вижу в console.log, но почему нет перерисовки компонента chd? (если вы введете что-то во ввод и нажмете Refe sh, ничего не произойдет)

class ListComponent extends React.Component{
    constructor(props){
        super(props);

        this.state = {reload: true};
    };

    refreshComponent(){
        if (this.state.reload){ 
            this.setState({reload: false })  
            console.log(this.state.reload);

        } else if (!this.state.reload) {
            this.setState({reload: true })
            console.log(this.state.reload);  
        }
    };
    render () {
        return (
        <div>   
           {WordList.map(word => {
                return <li><Excercise wordObject={word}></Excercise></li>})  }

                <button onClick={()=>this.refreshComponent()}>Refresh</button>
        </div>
        )
    }
}

export default ListComponent;

//chd component:

class Excercise extends React.Component {
render(){
    return (<div>
            <table>
                <tbody>
                    <td>
                        {this.props.wordObject.danishWord}
                        <input 
                        type={'text'} 
                        ></input>
                    </td>
                </tbody>
            </table>   
        </div>     
    )
}

1 Ответ

2 голосов
/ 16 апреля 2020

Существует неправильное представление о значении переиздания.

Проблема

Когда вы изменяете состояние в родительском компоненте, дочерний элемент перерисовывается , но не уничтожает его , поэтому стоимость остается там.

Объяснение

Повторная визуализация компонента не означает уничтожить его и создать заново. Он просто уведомляет его о том, что что-то изменилось и что механизм реагирования должен проверить наличие каких-либо различий во взглядах

https://reactjs.org/docs/react-component.html#updating

Если вам нужен более конкретный c ответ (с кодом), вам следует лучше объяснить, чего вы пытаетесь достичь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...