在使用 remix 渲染页面后如何获取附加数据？

Question

我使用加载器来获取多个资源的 id，用户可以选择他们想要加载的资源的 id。

我还没有找到一种方法来将新参数传递给加载器以在页面加载后获取新数据。

为此专门创建了一个 Stack Overflow 帐户。非常感谢任何帮助！！

我发现重新混合加载器只能接受请求、参数和上下文。

一个可能的解决方案可能是通过 URL 传递参数，但我希望找到不同的解决方案，因为我需要能够传递 id 数组。我还没有让这个解决方案发挥作用。

我探索的另一个解决方案是使用 formState 附加 ids，但这不会重新加载页面（因此加载器不会使用新参数发出另一个请求）。

Answer 1

在页面呈现后获取附加数据通常是使用客户端 JavaScript 完成的。您可以使用各种方法和 API 来异步获取数据，例如 Fetch API 或 Axios。

以下是如何使用 JavaScript 在 Remix 应用程序中呈现页面后获取其他数据的基本示例： // 假设您的 HTML 中有一个 id 为“fetchDataBtn”的按钮

document.getElementById('fetchDataBtn').addEventListener('click', async function() {
try {
// Perform an asynchronous HTTP request to fetch additional data
const response = await fetch('/path/to/your/api/endpoint');
        
if (!response.ok) {
throw new Error('Failed to fetch data');
}
        
// Parse the response as JSON
const data = await response.json();
        
// Do something with the fetched data, such as updating the DOM
console.log(data);
} catch (error) {
console.error('Error fetching data:', error);
}
});

在此示例中：

我们选择 id 为 fetchDataBtn 的按钮元素。 我们为“click”事件的按钮添加一个事件侦听器。 单击该按钮时，会发出异步 HTTP 请求，以从指定的 API 端点 (/path/to/your/api/endpoint) 获取其他数据。 成功获取数据后，会将其解析为 JSON。 然后，您可以使用获取的数据来更新 DOM 或根据需要执行任何其他操作。 确保将 /path/to/your/api/endpoint 替换为 API 端点的实际 URL，该端点提供您想要获取的其他数据。