Question

在useEffect（）中，我正在使用fetch（）调用从服务器请求数据。

收到数据后，我试图修改我之前定义的钩子。但是，该钩子不希望除了此新数据。

为了确保在将数据传输到我的React钩子之前，我的代码正确等待数据返回，我设置了两个变量。

第一个是在我的功能组件之外创建的空数组： “ eventTicketInfo”。
第二个是挂钩，也是一个空数组，在我的功能组件“ ticketInfo”中创建。

我的代码成功填充了“ eventTicketInfo”，但没有填充“ ticketInfo”。

从fetch（）接收到的响应对象是一个结构如下的数组：

[ {ticketID: "fc056", ticketName: "General Admission"},
  {ticketID: "fc057", ticketName: "General Admission + 1 Drink"}
  {ticketID: "fc058", ticketName: "VIP"}
  {ticketID: "fc059", ticketName: "VIP + 1 Drink"} ]

数组元素的数量会有所不同，上面的示例显示了四个。

但是每个数组元素内部的字段数将保持不变，上面的示例显示了两个。

这是我正在使用的基本代码：

let eventTicketInfo = [];

const EventData = () => {
    const [ticketInfo, setTicketInfo] = useState([]);

    useEffect(() => {
        getEventData(eventID);
    }, []);

    const getEventData = eventId => {
        return fetch(`${API}/event/e/${eventId}`, {method: "GET"})
            .then(response => {
                eventTicketInfo = response;
                setTicketInfo(response);
            })
            .catch(err => {
                console.log(err);
            });
      };
}

此代码成功地用四个元素组成的数组填充了“ eventTicketInfo”。但是，“ ticketInfo”仍然是一个空数组。

任何帮助将不胜感激！

Answer 1

当我尝试一下时，它似乎工作正常：https://codepen.io/LannyIsMyHandle/pen/LYYMZXm

请记住，EventData可能会在获取承诺解析和状态更新之前渲染多次，因此您应该至少将ticketInfo视为一个空数组。但是，设置状态后，它将重新渲染组件，您应该会看到实际值。

修改useEffect（）中的React钩子变量，该变量使用fetch（）调用

1 个答案: