React javascript：SetState() 不强制重新渲染

Question

我正在返回一个空的 div，直到我的套接字连接完成，我从中获取了数据。 但是 setState 从不强制重新渲染，为什么以及如何修复它？

检查 LoadData() 和 Render()

class LoadNames extends React.Component{
    constructor(props)
    {
        super(props);
        this.state = {names: []}
        this.loaded = false;

        this.loadData = this.loadData.bind(this);
    }   

    componentDidMount()
    {
       this.loadData();
    }

    loadData()
    {
        socket.on("updateCatagories", (data) => {
            //entry point
            console.log("UPDATE RECIEVED, NEW DATA: ");
            this.loaded = true;
            this.setState((state, props) =>
            {
                this.names = data              
            })
           
            console.log(this.names);
        });
    }

    render()
    {
        console.log(this.loaded);
        if (this.loaded === false)
        {
            return <div />
        }

        return <h1>here: {this.state.names[3].name}</h1>
    }
}```

Answer 1

您没有正确更新状态。

您需要从传递给this.setState(...)的回调函数中返回对象文字

this.setState((state, props) => ({ names: data }));

在您的情况下，由于新状态独立于状态的先前值，您可以更新状态，如下所示：

this.setState({ names: data });

---

旁注：您在调用this.setState()后立即记录this.names （它应该是this.state.names ）但状态是异步更新的，因此它不会记录this.state.names的新值。

要记录状态的更新值，您可以将第二个参数传递给this.setState() ，它是一个回调函数，在状态更新后调用。

this.setState({ names: data }, () => {
    console.log(this.state.names)
});