Question

我有一个按钮刷新女巫应更改组件中的状态，并应重新渲染其子组件Excercise。我可以在console.log中看到状态的变化，但是为什么不重新渲染chd组件呢？（如果您在输入中添加了smth并单击“刷新”，则不会发生任何事情）

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>     
    )
}

Answer 1

人们对重新表达的含义有误解。

问题

当您更改父级组件的状态时，子级被重新渲染，但是它不会销毁它，因此值保留在那里。

说明

重新渲染组件，并不意味着要销毁它并重新创建它。它只是通知它某些更改，并且React引擎必须检查任何视图差异。

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

如果您需要一个更具体的答案（使用代码），则应该更好地解释您要实现的目标。

状态已更改，但组件未重新加载

1 个答案:

问题

说明