ตอบสนอง: เหตุใดองค์ประกอบลูกจึงไม่อัปเดตเมื่อมีการเปลี่ยนแปลงเสา

เหตุใดในตัวอย่างโค้ดหลอกต่อไปนี้ Child จึงไม่แสดงผลอีกครั้งเมื่อคอนเทนเนอร์เปลี่ยน 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()หลังจากแก้ไขค่าในคอนเทนเนอร์แล้ว Child ก็ยังคงแสดงค่าเดิม

อัปเดตลูกให้มีแอตทริบิวต์ "คีย์" เท่ากับชื่อ คอมโพเนนต์จะแสดงผลใหม่ทุกครั้งที่มีการเปลี่ยนแปลงคีย์

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

เพราะเด็ก ๆ จะไม่แสดงผลหากอุปกรณ์ประกอบฉากของผู้ปกครองเปลี่ยนไป แต่ถ้า STATE เปลี่ยนไป :)

สิ่งที่คุณกำลังแสดงคือ https://facebook.github.io/react/tips/communicate-between-components.html

จะส่งผ่านข้อมูลจากผู้ปกครองไปยังเด็กผ่านอุปกรณ์ประกอบฉาก แต่ไม่มีตรรกะการแสดงผลที่นั่น

คุณต้องตั้งค่าสถานะบางอย่างเป็นระดับบนสุดจากนั้นแสดงผลลูกในสถานะการเปลี่ยนแปลงของผู้ปกครอง สิ่งนี้สามารถช่วยได้ https://facebook.github.io/react/tips/expose-component-functions.html

ผมมีปัญหาเหมือนกัน. นี่คือวิธีแก้ปัญหาของฉันฉันไม่แน่ใจว่านั่นเป็นแนวทางปฏิบัติที่ดีบอกฉันว่าไม่:

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

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

UPD: ตอนนี้คุณสามารถทำสิ่งเดียวกันโดยใช้ React Hooks: (เฉพาะในกรณีที่ส่วนประกอบเป็นฟังก์ชัน)

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

ตามองค์ประกอบปรัชญา React ไม่สามารถเปลี่ยนอุปกรณ์ประกอบฉากได้ พวกเขาควรได้รับจากผู้ปกครองและควรไม่เปลี่ยนรูป ผู้ปกครองเท่านั้นที่สามารถเปลี่ยนอุปกรณ์ประกอบฉากของบุตรหลานได้

คำอธิบายที่ดี สถานะและอุปกรณ์ประกอบฉาก

อ่านกระทู้นี้ด้วยเหตุใดฉันจึงไม่สามารถอัปเดตอุปกรณ์ประกอบฉากใน react.js ได้

คุณควรใช้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>
        }
    }
}

รหัสของคุณไม่ถูกต้อง ฉันไม่สามารถทดสอบรหัสนี้ได้

เมื่อสร้างการตอบสนองจากส่วนประกอบและfunctionsuseState

const [drawerState, setDrawerState] = useState(false);

const toggleDrawer = () => {
      // attempting to trigger re-render
      setDrawerState(!drawerState);
};

นี้จะไม่ทำงาน

         <Drawer
            drawerState={drawerState}
            toggleDrawer={toggleDrawer}
         />

นี้ไม่ทำงาน (เพิ่มกุญแจ)

         <Drawer
            drawerState={drawerState}
            key={drawerState}
            toggleDrawer={toggleDrawer}
         />

ยืนยันการเพิ่มคีย์ใช้งานได้ ฉันอ่านเอกสารเพื่อพยายามทำความเข้าใจว่าทำไม

React ต้องการให้มีประสิทธิภาพเมื่อสร้างส่วนประกอบย่อย จะไม่แสดงผลองค์ประกอบใหม่หากเหมือนกับลูกอื่นซึ่งทำให้หน้าโหลดเร็วขึ้น

การเพิ่ม Key forces React เพื่อแสดงผลคอมโพเนนต์ใหม่จึงเป็นการรีเซ็ต State สำหรับคอมโพเนนต์ใหม่นั้น

https://reactjs.org/docs/reconciliation.html#recursing-on-children

ใช้ฟังก์ชัน setState คุณสามารถทำได้

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

ภายในวิธีจัดการเหตุการณ์

เมื่อสถานะได้รับการอัปเดตจะทำให้เกิดการเปลี่ยนแปลงและการแสดงผลใหม่จะเกิดขึ้น

คุณควรกำหนดให้เด็กเป็นส่วนประกอบที่ใช้งานได้หากไม่ได้รักษาสถานะใด ๆ และเพียงแค่แสดงผลอุปกรณ์ประกอบฉากแล้วเรียกจากผู้ปกครอง อีกทางเลือกหนึ่งคือคุณสามารถใช้ hooks กับคอมโพเนนต์การทำงาน (useState) ซึ่งจะทำให้คอมโพเนนต์ไร้สถานะแสดงผลอีกครั้ง

นอกจากนี้คุณไม่ควรเปลี่ยนโพรปัสเนื่องจากไม่เปลี่ยนรูป รักษาสถานะของส่วนประกอบ

Child = ({bar}) => (bar);

ฉันพบปัญหาเดียวกัน ฉันมีTooltipส่วนประกอบที่ได้รับshowTooltipprop ซึ่งฉันกำลังอัปเดตParentตามองค์ประกอบตามifเงื่อนไขมันกำลังได้รับการอัปเดตในParentองค์ประกอบ แต่Tooltipส่วนประกอบไม่แสดงผล

const Parent = () => {
   let showTooltip = false;
   if(....){ showTooltip = true; }
   return(
      <Tooltip showTooltip={showTooltip}></Tooltip>
   )
}

ความผิดพลาดที่ฉันทำคือการประกาศshowTooltipว่าเป็นผู้ให้

ฉันรู้ว่าฉันทำอะไรผิดฉันละเมิดหลักการของการเรนเดอร์ทำงานการเปลี่ยนมันด้วยตะขอก็ทำได้

const [showTooltip, setShowTooltip] =  React.useState<boolean>(false);

กำหนดอุปกรณ์ประกอบฉากที่เปลี่ยนแปลงใน mapStateToProps ของวิธีการเชื่อมต่อในองค์ประกอบลูก

function mapStateToProps(state) {
  return {
    chanelList: state.messaging.chanelList,
  };
}

export default connect(mapStateToProps)(ChannelItem);

ในกรณีของฉันช่องของ channelList ได้รับการอัปเดตดังนั้นฉันจึงเพิ่ม chanelList ใน mapStateToProps

export default function DataTable({ col, row }) {
  const [datatable, setDatatable] = React.useState({});
  useEffect(() => {
    setDatatable({
      columns: col,
      rows: row,
    });
  /// do any thing else 
  }, [row]);

  return (
    <MDBDataTableV5
      hover
      entriesOptions={[5, 20, 25]}
      entries={5}
      pagesAmount={4}
      data={datatable}
    />
  );
}

ตัวอย่างนี้ใช้useEffectเพื่อเปลี่ยนสถานะเมื่อมีpropsการเปลี่ยนแปลง