Question

我正在使用react钩子useEffect在组件中加载数据。我面临一个奇怪的问题，就我而言，如果后端有一些数据，则必须将其绑定到我的组件，否则默认值应绑定到我的组件。不幸的是，我的代码在大多数情况下都可以正常工作，但是即使数据来自后端，有时也会显示默认值。实际上，它正在加载两次，有时数据会被默认值覆盖。

我尝试了很多方法，但是失败了。

useEffect(() => {
    getReadJson();
    getReadAudio();

        if (readJson) {
          const Jparse = JSON.parse(readJson);
          console.log("Jparse", Jparse);
          Jparse &&
            Jparse.map((jsondata) => {
              peaksInstance.segments.add({
                startTime: parseFloat(jsondata.startTime),
                endTime: parseFloat(jsondata.endTime),
                labelText: jsondata.segmentData,
                editable: false,
                speakerId: jsondata.speakerId,
              });
              peaksInstance.points.add({
                time: parseFloat(jsondata.endTime),
                editable: false,
              });
            });
        }
        if (peaksInstance.segments._segments.length == 0) {
          debugger;
          const endTime = peaksInstance.player.getDuration();
          peaksInstance.segments.add({
            startTime: 0,
            endTime: endTime,
            labelText: "",
            editable: false,
            speakerId: "",
          });
        }
   
  }, [getReadJson, readJson, getReadAudio, readAudio]);

我是新来反应钩子的人。任何帮助将不胜感激。预先感谢。

Answer 1

您可以暂时使用这种方式。

var isEffect = false
useEffect(() => {
  if (isEffect) { isEffect = false; return;}

  ... code .....
  
  isEffect = true; 
})

Answer 2

尝试这种方式

const isFirstRender = useRef(true);

useEffect(() => {
   if (isFirstRender.current) {

      code...

   }
}, []);

传递多个参数后，useEffect调用了两次

2 个答案: