问题

I'm having a problem with using the useEffect method as such on creating an order component, upon checking on my data base it passes 2 data instead of 1 data. So, I really need help on this one as I'm only a beginner on react.

Tried putting the creating of order in a function, and calling the function but it keeps looping the entire function

useEffect(() => {
    fetch(`${process.env.REACT_APP_API_URL}/orders`, {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`,
        'Content-Type': 'application/json',
      },
    })
      .then((result) => result.json())
      .then((data) => {
        console.log('Order data: ', data)
        setOrder(data)
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

const fetchOrder = () => {
    fetch(`${process.env.REACT_APP_API_URL}/orders`, {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`,
        'Content-Type': 'application/json',
      },
    })
      .then((result) => result.json())
      .then((data) => {
        setOrder(data);
      })
      .catch((error) => {
        console.log(error);
      });

  };

  useEffect(() => {
    fetchOrder();
  }, []);

useEffect(() => {
    fetch(`${process.env.REACT_APP_API_URL}/orders`, {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`,
        'Content-Type': 'application/json',
      },
    })
      .then((result) => result.json())
      .then((data) => {
        console.log('Order data: ', data)
        setOrder(data)
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

const fetchOrder = () => {
    fetch(`${process.env.REACT_APP_API_URL}/orders`, {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`,
        'Content-Type': 'application/json',
      },
    })
      .then((result) => result.json())
      .then((data) => {
        setOrder(data);
      })
      .catch((error) => {
        console.log(error);
      });

  };

  useEffect(() => {
    fetchOrder();
  }, []);

答案1

得分: 1

你已经编写了两个获取函数，两者的方法都是POST，因此它们执行相同的获取操作，但你只调用了fetchOrder()，这是正确的。

1. 请首先删除重复的那个。
2. 尝试使用async/await。

使用async/await代替promise链：async/await语法提供了更可读和类似同步的代码结构。它允许您以更顺序的方式编写异步代码。

const headers = {
  Authorization: `Bearer ${localStorage.getItem('token')}`,
  'Content-Type': 'application/json',
};

const fetchOrder = async () => {
  try {
    const response = await fetch(`${API_URL}/orders`, {
      method: 'POST',
      headers: headers,
    });
    const data = await response.json();
    setOrder(data);
  } catch (error) {
    console.log(error);
  }
};

useEffect(() => {
  fetchOrder();
}, []);```

<details>
<summary>英文:</summary>

You have written two fetch functions and both Methods are in POST so it does the same fetching but you are calling only fetchOrder() which is fine.
1. Please remove the duplicate one first
2. try using  async/await.

 Use async/await instead of promise chains: Async/await syntax provides a more readable and synchronous-looking code structure. It allows you to write asynchronous code in a more sequential manner.

```const API_URL = process.env.REACT_APP_API_URL;
const headers = {
  Authorization: `Bearer ${localStorage.getItem(&#39;token&#39;)}`,
  &#39;Content-Type&#39;: &#39;application/json&#39;,
};

const fetchOrder = async () =&gt; {
  try {
    const response = await fetch(`${API_URL}/orders`, {
      method: &#39;POST&#39;,
      headers: headers,
    });
    const data = await response.json();
    setOrder(data);
  } catch (error) {
    console.log(error);
  }
};

useEffect(() =&gt; {
  fetchOrder();
}, []);```


</details>