如何在React js中的变量改变时重新加载api fetch调用？

在React.js中，当变量改变时重新加载API Fetch调用可以通过以下步骤实现：

1. 创建一个状态变量来存储API返回的数据。可以使用useState钩子函数来定义状态变量，并使用初始值设置为空数组或空对象。

const [data, setData] = useState([]);

1. 使用useEffect钩子函数来监听变量的变化，并在变量改变时重新调用API Fetch。

useEffect(() => {
  fetchData();
}, [variable]);

async function fetchData() {
  try {
    const response = await fetch('API_URL');
    const jsonData = await response.json();
    setData(jsonData);
  } catch (error) {
    console.log(error);
  }
}

在上述代码中，useEffect函数接受一个回调函数和一个依赖数组。依赖数组中的变量发生变化时，useEffect会重新执行回调函数。在回调函数中，我们调用fetchData函数来获取API数据，并使用setData函数更新状态变量。

1. 在组件中使用获取到的数据。

return (
  <div>
    {data.map(item => (
      <p key={item.id}>{item.name}</p>
    ))}
  </div>
);

在上述代码中，我们使用map函数遍历数据数组，并渲染每个数据项。

这样，当变量改变时，React.js会重新渲染组件，并触发useEffect钩子函数重新调用API Fetch，从而实现在变量改变时重新加载API数据。

推荐的腾讯云相关产品：腾讯云云函数（Serverless Cloud Function），产品介绍链接地址：https://cloud.tencent.com/product/scf