为什么当状态改变时react不调用渲染?

IT技术 javascript reactjs flux
2021-05-28 05:26:20

当状态改变时,我有自动重新渲染视图的问题。状态已更改,但未render()调用。但是当我打电话时this.forceUpdate(),一切正常,但我认为这不是最好的解决方案。有人可以帮我吗?

class TODOItems extends React.Component {

constructor() {
    super();

    this.loadItems();
}

loadItems() {
    this.state = {
        todos: Store.getItems()
    };
}

componentDidMount(){
    //this loads new items to this.state.todos, but render() is not called
    Store.addChangeListener(() => { this.loadItems(); this.forceUpdate(); });
}

componentWillUnmount(){
    Store.removeChangeListener(() => { this.loadItems(); });
}

render() {

    console.log("data changed, re-render");
    //...
}}
3个回答

当您声明初始状态时,您应该从构造函数中使用this.state = {};(就像在您的loadItems()方法中一样)。当您要更新项目时,请使用this.setState({}). 例如:

constructor() {
    super();

    this.state = {
        todos: Store.getItems()
    };
}

reloadItems() {
    this.setState({
        todos: Store.getItems()
    });
}

并更新您的componentDidMount

Store.addChangeListener(() => { this.reloadItems(); });

你不应该this.state直接变异你应该使用this.setState方法。

改变loadItems

loadItems() {
    this.setState({
        todos: Store.getItems()
    });
}

更多react文档

在您的组件中,每当您直接操作状态时,您都需要使用以下内容:

this.setState({});

完整代码:

class TODOItems extends React.Component {

constructor() {
    super();

    this.loadItems();
}

loadItems() {
  let newState = Store.getItems();
    this.setState = {

        todos: newState
    };
}

componentDidMount(){
    //this loads new items to this.state.todos, but render() is not called
    Store.addChangeListener(() => { this.loadItems(); this.forceUpdate(); });
}

componentWillUnmount(){
    Store.removeChangeListener(() => { this.loadItems(); });
}

render() {

    console.log("data changed, re-render");
    //...
}}