小编Yus*_*ick的帖子

我真的不知道如何清楚地询问，但是，我会先粘贴我的代码并在下面询问。

function useToDos() {
  const queryCache = useQueryCache();
  const fetchTodos = useQuery(
    'fetchTodos',
    () => client.get(paths.todos).then(({ data }: any) => data),
    { enabled: false }
  );

  const createTodo = async ({ name ) =>
    await client.post(paths.todos, { name }).then(({ data }) => data);

  return {
    fetchTodos,
    createTodo: useMutation(createTodo, {
      onMutate: newItem => {
        queryCache.cancelQueries('fetchTodos');
        const previousTodos = queryCache.getQueryData('fetchTodos');
        queryCache.setQueryData('fetchTodos', old => [
          ...old,
          newItem,
        ]);
        return () => queryCache.setQueryData('fetchTodos', previousTodos);
      },
    }),
  };
}

如您所见，我正在尝试创建自己的自定义挂钩来包装反应查询功能。因此，我需要将fetchTodos查询设置为禁用，这样它就不会立即运行。但是，这会破坏所有后台数据获取吗？

具体来说，当我运行createTodo并且 …

在花了相当长的时间与 React 和 TypeScript 中的类型和前向引用进行斗争之后，我希望其他人能为我解决这个问题。

我正在构建一个 DataList 组件，它由三部分组成：

• 保存所有事件监听器和逻辑的容器
• 列表本身，一个ul
• 列表项，一个li

最终，用法将如下所示：

<DataList.List ...>
  <DataList.Item ...>content</DataList.Item>
</DataList.List>

为了实现我需要的功能，我正在利用 React.forwardRef，但发现使用 TypeScript 很难做到这一点，因为我很难正确输入组件来接收ref以及children附加的 props。

DataListContainer
我本质上希望该组件在返回主 DataList 组件（如下所示）时仅处理逻辑和事件侦听器。但这里的关键是，我需要在此处创建 DataList 引用并将其分配给返回的组件。

const DataListContainer: React.FC = ({ children }) => {
  const listRef = useRef<HTMLUListElement>(null);

  return (
      <DataList ref={listRef}>{children}</DataList>
  );
};

DataList
我希望 DataList 组件只处理它的 UI 和 props。

interface Props extends TestId {
  focusedItemId?: string;
}

const DataList: React.FC<Props> = React.forwardRef<HTMLUListElement, Props>(
  ({ children, focusedItemId, testId }, ref) …

我正在寻找一个包含电影标题字符串的数组，例如：

['Battleship','101 Dalmatians','Alice, Sweet Alice','40 Days of Night', '303 Fear Faith Revenge'...]

我的预期输出是：

101 Dalmatians
303 Fear Faith Revenge
40 Days of Night
Alice, Sweet, Alice
Battleship

我正在尝试以下内容：

getMoviesInAlpOrder() {
    const movieList = this.getMovies();
    return movieList.sort(function(a, b) {
        return a.title.toLowerCase() > b.title.toLowerCase();
    });
}

这几乎可行，但是在对数字和字符标题进行排序时确实存在一些冲突。关于如何最好地处理此类请求的任何建议？

我正在开发一个 TypeScript + React 项目。对于组件，我想使用多态属性as。但是，我想将其限制为 HTML 标签，因此它不会接受 ReactNodes 或 JSX 元素。但我不知道可以使用哪种类型来实现此目的。

<Foo as="section">...</Foo> \xe2\x9c\x85\n<Foo as={SomeOtherComponent}>...</Foo> \xe2\x9d\x8c\n

我尝试过使用 React.ElementType 但看起来仍然接受其他组件。

interface Foo {\n  as?: React.ElementType\n}\n

我可以使用哪种类型只接受 HTML 标签而不接受其他元素或节点？

我正在运行一个相当长的 SQL 查询，其核心非常基本：

SELECT * FROM documents WHERE doc_id IN (995,941,940,954,953,973)

此查询的目标结果是按照 IN 子句中设置的顺序显示文档。但是，我还没有找到一个干净的解决方案来这样做。

我想我可以使用 charindex() 来处理这个问题。

ORDER BY charindex('995,941,940,954,953,973',doc_id)

ORDER BY 的结果只是按照默认的 ASC 顺序对 doc_ids 进行排序。

有关如何具体定义此查询的结果顺序的任何指导吗？