React Hook useEffect มีการอ้างอิงที่ขาดหายไป: 'props'

Question

ฉันพยายามใช้ react hooks (นี่เป็นครั้งแรกของฉัน) แต่ฉันได้รับข้อผิดพลาดนี้เมื่อใช้ useEffect เหมือนกับ componentDidMount ด้านบน: 'React Hook useEffect มีการอ้างอิงที่ขาดหายไป:' props ' รวมไว้หรือลบอาร์เรย์อ้างอิง อย่างไรก็ตาม 'อุปกรณ์ประกอบฉาก' จะเปลี่ยนไปเมื่อเสาใด ๆเปลี่ยนไปดังนั้นการแก้ไขที่ต้องการคือการทำลายโครงสร้างของวัตถุ 'อุปกรณ์ประกอบฉาก' ภายนอกการเรียก useEffect และอ้างถึงอุปกรณ์ประกอบฉากเหล่านั้นที่อยู่ใน useEffect '

ฉันกำลังพยายามส่งคำขอ GET ไปยัง API และต้องการอุปกรณ์ประกอบฉากบางอย่างใน url นี่คือรหัสของฉัน:

function SomeComponent(props) {
  const [data, setData] = useState({});
  const [loading, setLoading] = useState(true);
  const [hasError, setErrors] = useState(false);
  
  useEffect(() => {
    async function fetchData() {
      try {
        let response = await Axios.get( `/some-url/${props.obj.id}/abc`,
          
        );
        let { data } = response.data;
        setData(data);
        setLoading(false);
        props.totalStats({data });
      } catch (error) {
        setErrors(error);
        setLoading(false);
      }
    }
    fetchData();
  }, []);
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

ฉันได้ค้นหาและลองใช้วิธีแก้ปัญหาเหล่านี้แล้ว แต่มันไม่ได้ผลสำหรับฉัน:

const { id } = props.obj.id;
const {totalStats} = props.totalStats

useEffect(()=>{
//Here is the code
//I replace the $ {props.obj.id} by the id and the function props.totalStats by //totalStats
},[id,totalStats]

การทำเช่นนั้นฉันได้รับรหัสที่ไม่ได้กำหนดและในการเรียกใช้ฟังก์ชัน

จากนั้นฉันลองทำด้วยวิธีนี้:

useEffect(()=>{
//here is the code like the first one

},[props])

แต่สิ่งนี้ทำให้จำนวนคำขอไปยัง api

Answer 1

ถอดวงเล็บออกจากการนำเข้าคงที่

ดังนั้นควรมีลักษณะดังนี้:

function SomeComponent(props) {
  const objId = props.obj.id;
  const totalStats = props.totalStats;
  
  const [data, setData] = useState({});
  const [loading, setLoading] = useState(true);
  const [hasError, setErrors] = useState(false);
  
  useEffect(() => {
    async function fetchData() {
      try {
        let response = await Axios.get( `/some-url/${objId}/abc`,
          
        );
        let { data } = response.data;
        setData(data);
        setLoading(false);
        totalStats({data });
      } catch (error) {
        setErrors(error);
        setLoading(false);
      }
    }
    fetchData();
  }, [objId, totalStats]);
}