React.useState ไม่รีโหลดสถานะจากอุปกรณ์ประกอบฉาก

ฉันคาดหวังว่าสถานะจะโหลดซ้ำเมื่อเปลี่ยนอุปกรณ์ประกอบฉาก แต่ไม่ได้ผลและuserตัวแปรไม่ได้รับการอัปเดตในการuseStateโทรครั้งต่อไปมีอะไรผิดปกติ

function Avatar(props) {
  const [user, setUser] = React.useState({...props.user});
  return user.avatar ? 
         (<img src={user.avatar}/>)
        : (<p>Loading...</p>);
}

codepen

อาร์กิวเมนต์ที่ส่งไปยัง useState เป็นสถานะเริ่มต้นเหมือนกับการตั้งค่าสถานะในตัวสร้างสำหรับส่วนประกอบคลาสและไม่ได้ใช้เพื่ออัปเดตสถานะในการแสดงผลซ้ำ

หากคุณต้องการอัปเดตสถานะเกี่ยวกับการเปลี่ยนแปลงเสาให้ใช้useEffecthook

function Avatar(props) {
  const [user, setUser] = React.useState({...props.user});

  React.useEffect(() => {
      setUser(props.user);
  }, [props.user])

  return user.avatar ? 
         (<img src={user.avatar}/>)
        : (<p>Loading...</p>);
}

การสาธิตการทำงาน

ส่วนประกอบการทำงานที่เราใช้useStateในการตั้งค่าเริ่มต้นให้กับตัวแปรของเราหากเราส่งค่าเริ่มต้นผ่านอุปกรณ์ประกอบฉากมันจะกำหนดค่าเริ่มต้นเดียวกันเสมอจนกว่าคุณจะไม่ใช้useEffecthook

เช่นกรณีของคุณสิ่งนี้จะทำงานของคุณ

 React.useEffect(() => {
      setUser(props.user);
  }, [props.user])

ฟังก์ชันที่ส่งผ่านไปยัง useEffect จะทำงานหลังจากการแสดงผลถูกส่งไปที่หน้าจอ

โดยค่าเริ่มต้นเอฟเฟกต์จะทำงานหลังจากการเรนเดอร์เสร็จสิ้นทุกครั้ง แต่คุณสามารถเลือกที่จะเริ่มทำงานได้ก็ต่อเมื่อมีการเปลี่ยนแปลงค่าบางอย่างเท่านั้น

React.useEffect(FunctionYouWantToRunAfterEveryRender)

หากคุณส่งอาร์กิวเมนต์เดียวเพื่อ useEffect มันจะเรียกใช้เมธอดนี้ทุกครั้งหลังการเรนเดอร์คุณสามารถตัดสินใจได้ว่าจะเริ่มการทำงานนี้เมื่อใดFunctionYouWantToRunAfterEveryRenderโดยส่งอาร์กิวเมนต์ที่สองไปที่ useEffect

React.useEffect(FunctionYouWantToRunAfterEveryRender, [props.user])

อย่างที่คุณสังเกตว่าฉันกำลังส่ง [props.user] ตอนนี้useEffectจะเริ่มการFunctionYouWantToRunAfterEveryRenderทำงานของฟังก์ชันนี้เมื่อprops.userมีการเปลี่ยนแปลงเท่านั้น

ฉันหวังว่านี่จะช่วยให้ความเข้าใจของคุณแจ้งให้เราทราบหากจำเป็นต้องมีการปรับปรุงใด ๆ ขอบคุณ

พารามิเตอร์ที่ส่งไปReact.useState()เป็นเพียงค่าเริ่มต้นสำหรับสถานะนั้น การตอบสนองจะไม่รับรู้ว่าเมื่อเปลี่ยนสถานะเพียงแค่ตั้งค่าเริ่มต้นเท่านั้น คุณจะต้องตั้งค่าสถานะเริ่มต้นในตอนแรกจากนั้นจึงเรียกแบบมีเงื่อนไขsetUser(newValue)ซึ่งจะรับรู้ว่าเป็นสถานะใหม่และแสดงองค์ประกอบอีกครั้ง

ฉันขอแนะนำข้อควรระวังในการอัปเดตสถานะโดยไม่มีเงื่อนไขบางประการเพื่อป้องกันไม่ให้อัปเดตอยู่ตลอดเวลาดังนั้นจึงได้รับการแสดงผลทุกครั้งที่ได้รับอุปกรณ์ประกอบฉาก คุณอาจต้องการพิจารณายกฟังก์ชันสถานะไปยังองค์ประกอบหลักและส่งผ่านสถานะของพาเรนต์ไปยัง Avatar นี้ในฐานะเสา

ตามเอกสาร ReactJS เกี่ยวกับ Hooks :

แต่จะเกิดอะไรขึ้นถ้าเพื่อน prop เปลี่ยนไปในขณะที่ส่วนประกอบอยู่บนหน้าจอ? ส่วนประกอบของเราจะแสดงสถานะออนไลน์ของเพื่อนคนอื่นต่อไป นี่คือบั๊ก นอกจากนี้เรายังอาจทำให้หน่วยความจำรั่วหรือขัดข้องเมื่อยกเลิกการต่อเชื่อมเนื่องจากการโทรยกเลิกการสมัครจะใช้รหัสเพื่อนที่ไม่ถูกต้อง

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

PS: ฉันมีรหัสไม่เพียงพอที่จะตัดสิน แต่คุณไม่สามารถ setUser () ในฟังก์ชัน Avatar (อุปกรณ์ประกอบฉาก) ของคุณได้หรือไม่?

ในโลกแห่งปฏิกิริยาคุณควรอัปเดตสถานะของคุณในฟังก์ชัน componentWillRecieveProps (nextProps) ในกรณีเช่นนี้