在 React 中显示更新的状态答案

【问题标题】：Display updated state in React在 React 中显示更新的状态
【发布时间】：2018-11-04 06:10:33
【问题描述】：

我正在 React 中制作待办事项列表。这些项目存储在应用程序状态的对象中。当用户选中该框时，我可以更新状态，但不显示更新后的状态。我知道对状态的更改并不总是立即更新组件，所以我尝试将render() 函数作为回调传递给setState() 函数，但我收到一条错误消息Invalid argument passed as callback. Expected a function. Instead received: [object Object]。我也尝试添加 componentDidUpdate() 函数，但使用该方法没有任何成功，因为我不明白它是如何触发的。如何更新状态然后立即在页面上显示更新后的状态？

到目前为止，我有这个功能，当复选框被选中/取消选中时触发。

constructor(props) {
    super(props);

    this.state = {
        isLoading: null,
        isDeleting: null,
        list: null,
        title: "",
        term: "",
        content: []
    };
}

async componentDidMount() {
    try {
        const list = await this.getList();
        const { title, content } = list;

        this.setState({
            list,
            title,
            content
        });
    } catch (e) {
        alert(e);
    }
}

checkedChange = async event => {
    let todos = Object.assign({}, this.state.content);
    let key = event.target.attributes[0].value;

    if(event.target.checked) {
        todos[key] = true;
        this.setState({todos});
    }
    else {
        todos[key] = false;
        this.setState({todos});
    }
};

【问题讨论】：

您正在获取this.state.content 并设置todos。你确定 DOM 绑定了todos。并从setState 中删除this.render()，这是多余的。
为什么checkedChange 是一个异步函数？我没有理由明白为什么会这样。
“对状态的更改不会立即呈现”——是的，它们会。请在您设置组件状态的位置添加代码。
@jered 我不知道。这就是我的 IDE 建议的。 @front_end_dev 我不知道您所说的“DOM 与 todos 绑定”是什么意思。
@jmargolisvt 我的意思是 setState “并不总是立即更新组件”。根据 React 文档。

标签： javascript reactjs

【解决方案1】：

语法this.setState({todos}) 相当于写this.setState({todos: todos})。所以你没有更新this.state.content，我怀疑这是你想要做的。所以试试this.setState({content: todos})。

编辑：我强烈建议您安装和使用Chrome React developer tools。它将在您的开发托盘中显示为控制台、检查器等旁边的选项卡。它对于调试和可视化组件中发生的事情非常有用。

【讨论】：