小编Six*_*ght的帖子

我有自己的Form组件，我想将它与Parent Component.

const Form: React.FC<any> = ({ children, handleFormSubmit }) => (
  <form onSubmit={handleFormSubmit}>{children}</form>
);

Parent Component

const ParentComponent = () => {
...

const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    publishReview(review).then(() => setReview(initialReviewState));
  };

return (
 <Form onSubmit={handleFormSubmit}>
...
</Form>
)}

我认为handleFormSubmit会从它的声明中获取类型const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>)。

但它没有

我试图构建一个接口，甚至使用一种any类型：

interface FormProps {
  handleFormSubmit: any
}
const Form: React.FC<FormProps>= ({ children, handleFormSubmit }) => (
  <form onSubmit={handleFormSubmit}>{children}</form>
);

但它给出了以下错误：

const …

我多次遇到“对象可能为空”错误，通常我使用安全的“ if语句”以防返回空。

我有以下功能：

const ModalOverlay = (props: any[]) => {
  const overlayEl = useRef(null);
    useEffect(() => {
    overlayEl.current.focus();
    });
    return <div {...props} ref={overlayEl} />;
  }

但是overlayEl.current出现错误“对象未定义”。所以我尝试了：

if (!overlayEl) {
    return null
  } else {
    useEffect(() => {
    overlayEl.current.focus();
    });
    return <div {...props} ref={overlayEl} />;
  }

哪个没有用。我也尝试过：

overlay && overlayEl.current.focus();

任何提示将不胜感激！谢谢

在 React-Query 中，我们可以使用 useQueries 钩子来执行并行查询（主要类似于使用 Promise.all）：https://react-query.tanstack.com/guides/parallel-queries

每个查询都有一组我们可以使用的选项，其中一个是 ，onSuccess可以按如下方式使用：

const data = useQueries([{
    queryKey: 1,
    queryFn: () => axios.get(...),
    onSuccess: data => ... do something,
  },
  {
    queryKey: 2,
    queryFn: () => axios.get(...),
    onSuccess: data => ... do something,
  },
])

但我真正需要的是只有当所有查询都成功时才能执行操作。大多是这样的：

Promise.all(fn).then(...)

然后使用该数据运行函数。

我想出了一些类似的东西

1 - 将所有成功的查询推送到useState()

onSuccess: (data) => setData((prevData) => [...prevData, data])

并设置 useEffect：

useEffect(() => {
// run function
}, [data])

但这是行不通的，因为每次查询成功时它都会触发。可能会因无限循环而中断。

2 - 为一切成功设定条件：

 if (data.every(num => num.isSuccess === true)) {
    // …

我希望能够通过多个参数过滤数据数组：

const data = [{
    userId: '7',
    id: '1',
    title: 'quo provident culpa',
    body: "a",
    completed: true
  },
  {
    userId: '7',
    id: '2',
    title: 'natus commodi et',
        body: "a",
    completed: true
  },
  {
    userId: '1',
    id: '3',
    title: 'voluptatem et reprehenderit',
    body: "c",
    completed: false
  }
];

const query = {
  title: 'l',
  body: 'a'
}

我试过这个：

const filterData = (data, query) => {
  return data.filter(rec => {
    return Object.keys(query)
      .find(key => rec[key] === query[key])
  })
}

console.log(filterData(data, query))

我的解决方案不太有效，因为它返回满足至少一个参数的任何对象。在上面的情况下，我得到了这个返回： …

据我所知，扩展运算符类型是数组。在这种情况下，fn(...args)返回以下错误：

“无法调用类型缺少调用签名的表达式。类型‘从不’没有兼容的调用签名。”

我尝试了几个选项，但无法提出解决方案。

const callAll = (...fns: []) => (...args: []) => fns.forEach(fn => fn && fn(...args));

我已按照其他项目和线程中的说明进行操作，但无法让 React 找到酶配置文件。

package.json

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
"jest": {
    "collectCoverageFrom": [
      "src/**/*.{js, jsx, mjs}"
    ],
    "setupFiles": [
      "<rootDir>src/setupTests.js"
    ]
  }

src/setupTests.js

import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";
export { shallow, render, mount } from "enzyme";
export { shallowToJson } from "enzyme-to-json";

Enzyme.configure({ adapter: new Adapter() });

export default Enzyme;

the error when running tests

Enzyme Internal Error: Enzyme expects an adapter to be configured, but found …

我有一个对象数组：

const arr = [{name: ''}]

我想映射这个数组，如果name值是""（空字符串），我希望结果是一个空数组[]。

如果它有值，那么我希望结果是一个包含值的数组（例如 ["Rick"]

我试图有一个后备值，但结果仍然是 [""]

我的尝试：

const result = arr.map(a => a.name) || []

实际结果： [""]

想要的结果： []

我有一个数据源：

const data = {
  A: [{
    value: 1
  }, {
    value: 2
  }, {
    value: 38
  }],
  B: [{
    value: 46
  }, {
    value: 23
  }, {
    value: 32
  }],
  C: [{
    value: 2345
  }, {
    value: 56
  }, {
    value: 3
  }]
}

我需要在一个对象数组中转换这个对象，如下所示：

[{
  A: 1,
  B: 46,
  C: 2345
}, {
  A: 2,
  B: 23,
  C: 56
}, {
  A: 38,
  B: 32,
  C: 3
}]

我做了一些尝试，但仍然没有：

一种）

const result = Object.keys(data).map(key => data[key])

b)

const …