React类组件中setState调用后未更新state的问题如何解决

你遇到的现象本质上不是setState没有更新state，而是渲染逻辑存在多处错误，导致你误以为state没有更新，具体问题如下：

• 渲染时错误访问isPending字段：isPending存储在state对象中，需要通过this.state.isPending访问，你代码中写的this.isPending是undefined，对应loading判断永远不生效。
• 数组map回调没有返回值：你在map的回调中使用了花括号包裹JSX，但没有添加return语句，最终map返回全为undefined的数组，即便posts有值也不会渲染对应内容。
• setState未同步更新isPending状态：接口请求成功后你仅更新了posts字段，没有将isPending设为false，loading状态不会按预期消失。

export default class Posts extends Component {
    constructor(props) {
        super(props)
        this.state = {
            posts: null,
            isPending: true
        }
    }

    componentDidMount() {
        fetch('http://localhost:5000/api/all_posts/')
            .then(response => response.json())
            .then(data => {
                console.log(data)
                // 同步更新isPending状态
                this.setState({ posts: data, isPending: false });
            })
            // 补充错误处理，避免请求失败无反馈
            .catch(err => {
                console.error('请求失败：', err)
                this.setState({ isPending: false })
            })
    }
    render() {
        return (
            <div className="posts">
                {/* 修正isPending的访问路径 */}
                {this.state.isPending && <div>loading...</div>}
                {this.state.posts && this.state.posts.map((post) => (
                    // 把花括号改成圆括号隐式返回，或者加return语句
                    <div className="post" key={post.id}>
                        {post.slug}
                    </div>
                ))}
            </div>
        )
    }
}

你可以在render函数第一行添加console.log(this.state.posts)，就能看到setState已经成功更新了state的值，只是之前的渲染逻辑错误导致内容没有显示。

内容的提问来源于stack exchange，提问作者Ali Rahmani