Question

我一直在学习ReactJS。在其文档中，建议使用setState方法对组件进行任何更改，但在文档中，不建议依赖“props”，因为“state”和“props”是异步工作的。

Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

以下示例来自文档，但示例中尚未实现计数器，因此我自己制作了它。 我想知道下面的方法是将数据传递给有状态组件并在创建数据后更改其数据的正确方法。

class Clock extends React.Component{
    constructor(props){
        super(props);
        this.state = {date:new Date(),counter:parseInt(this.props.counter)};
    }

    componentDidMount(){
        this.timerId = setInterval(() => this.tick(),
        1000);
    }

    componentDidUnmount(){
        clearInterval(this.timerId);
    }

    tick(){

        this.setState((prevState,props)=>({
            date:new Date(),
            counter:prevState.counter+1 
        }));
    }

    render(){
        return (
            <div>
                <h1>Hello World</h1>
                <h2>It is {this.state.date.toLocaleTimeString()} - {this.state.counter}</h2>
            </div>
        );
    }
}

ReactDOM.render(<div><Clock counter="0" /><Clock counter="10" /></div>,document.getElementById('root'));

将名为“counter”的属性传递给组件，然后将其添加到构造函数的“state”中，之后，状态负责更改其数据。

我不明白的事情不是负责数据的“道具”吗？我的方法是真的和推荐的方式吗？

Answer 1

我的直觉是你没有做错任何事。文档说您不应该依赖this.props和this.state来计算下一个state。事实上，你正在避免将状态更新为先前状态的函数：

this.setState((prevState, props) => ({
  date: new Date(),
  counter: prevState.counter + 1 
}));

这是正确的方法，而另一种方式不是正确的方法：

this.setState({
  date: new Date(),
  counter: this.state.counter + 1 
});

至少对于未来状态取决于前一个状态的情况。您还正确使用道具来启动组件，因此您要传递要用于初始化组件状态的数据。这完全没问题。之后，国家负责并根据滴答功能改变状态。

这是将数据传递给有状态组件的正确方法吗？

1 个答案: