javascript - ويندوز - الرد: لماذا لا يتم تحديث المكون الفرعي عندما يتغير دعم




تحميل برنامج فلاش لتشغيل الالعاب (5)

لماذا في المثال التالي للرمز الزائف لا يعيد الطفل عرضه عندما يتغير الحاوية foo.bar؟

Container {
  handleEvent() {
    this.props.foo.bar = 123
  },

  render() {
    return <Child bar={this.props.foo.bar} />
}

Child {
  render() {
    return <div>{this.props.bar}</div>
  }
}

حتى لو قمت بالاتصال بـ forceUpdate() بعد تعديل القيمة في الحاوية ، لا يزال الطفل يعرض القيمة القديمة.


استخدم وظيفة setState. لذلك يمكن أن تفعله

       this.setState({this.state.foo.bar:123}) 

داخل طريقة الحدث مقبض.

بمجرد تحديث الحالة ، ستؤدي إلى حدوث تغييرات ، وستظهر إعادة التقديم.


تحديث الطفل ليكون سمة "مفتاح" يساوي الاسم. سيتم إعادة تقديم المكون في كل مرة يتغير فيها المفتاح.

Child {
  render() {
    return <div key={this.props.bar}>{this.props.bar}</div>
  }
}

كان لي نفس المشكلة. هذا حل لي ، لست متأكدًا من أن هذه هي الممارسة الجيدة ، أخبرني إذا لم يكن:

state = {
  value: this.props.value
};

componentDidUpdate(prevProps) {
  if(prevProps.value !== this.props.value) {
    this.setState({value: this.props.value});
  }
}

محدث: الآن يمكنك أن تفعل الشيء نفسه باستخدام React Hooks: (فقط إذا كان المكون عبارة عن وظيفة)

const [value, setValue] = useState(propName);
// This will launch only if propName value has chaged.
useEffect(() => { setValue(propName) }, [propName]);

لأن الأطفال لا يعرضون إذا تغيرت الدعائم الوالد ، ولكن إذا تغيرت حالته :)

ما تعرضه هو هذا: https://facebook.github.io/react/tips/communicate-between-components.html

سيتم تمرير البيانات من الأم إلى الطفل من خلال الدعائم ولكن لا يوجد منطق rerender هناك.

تحتاج إلى تعيين بعض الحالة على الوالد ثم إعادة تقديم الطفل في حالة تغيير الوالدين. هذا يمكن أن يساعد. https://facebook.github.io/react/tips/expose-component-functions.html


يجب عليك استخدام وظيفة setState . إذا لم يكن الأمر كذلك ، فلن تقوم الحالة بحفظ التغيير الخاص بك ، بغض النظر عن كيفية استخدام forceUpdate.

Container {
    handleEvent= () => { // use arrow function
        //this.props.foo.bar = 123
        //You should use setState to set value like this:
        this.setState({foo: {bar: 123}});
    };

    render() {
        return <Child bar={this.state.foo.bar} />
    }
    Child {
        render() {
            return <div>{this.props.bar}</div>
        }
    }
}

يبدو أن الرمز غير صالح. لا أستطيع اختبار هذا الرمز.





reactjs