当状态改变时，为什么反应不会调用渲染？

Question

当状态改变时，我有自动重新渲染视图的问题。 状态已更改，但不调用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");
    //...
}}

Answer 1

你应该使用this.state = {}; （在你的loadItems()方法中），当你声明初始状态时，来自构造函数。 如果要更新项目，请使用this.setState({}) 。 例如：

constructor() {
    super();

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

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

并更新您的componentDidMount ：

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

Answer 2

你this.state直接改变this.state 。 您应该使用this.setState方法。

更改loadItems ：

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

更多反应文档

Answer 3

在组件中，无论何时直接操作状态，都需要使用以下命令：

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");
    //...
}}