小编Rau*_*hez的帖子

我不知道为什么我的React组件渲染两次.所以我从params中提取一个电话号码并将其保存到状态,以便我可以搜索Firestore.一切似乎工作得很好,除了它呈现两次......第一个呈现电话号码和零点.第二次渲染所有数据都正确显示.有人可以指导我解决方案.

class Update extends Component {
constructor(props) {
    super(props);
    const { match } = this.props;
    this.state = {
        phoneNumber: match.params.phoneNumber,
        points: 0,
        error: ''
    }
}

getPoints = () => {
    firebase.auth().onAuthStateChanged((user) => {
        if(user) {
            const docRef = database.collection('users').doc(user.uid).collection('customers').doc(this.state.phoneNumber);
            docRef.get().then((doc) => {
                if (doc.exists) {
                const points = doc.data().points;
                this.setState(() => ({ points }));
                console.log(points);
                } else {
                // doc.data() will be undefined in this case
                console.log("No such document!");
                const error = 'This phone number is not registered yet...' …

我有两个组件，一个叫ReturningCustomer，另一个叫Update。我有一个电话号码保存在ReturningCustomer中，并且我想将该电话号码传递给Update组件，而必须呈现Update或使用Redux：

render() {
       return (
        <div className="row returning-customer">
            <h3>Returning Customer</h3>
            <div className="col">
                <p className="error">{this.state.error}</p>
                <form className="row" onSubmit={this.onSubmit}>
                    <label>Phone Number</label>
                    <input 
                        type="text"
                        className="validate"
                        onChange={this.onPhoneNumberChange}
                    />
                    <button className="btn">Go</button>
                </form>
            </div>
            <Update 
                phoneNumber={this.state.phoneNumber} 
            />
        </div>
    );

}