小编bet*_*ers的帖子

我正在尝试使用 date-fns 库显示倒计时器并按以下方式执行操作，但无法在反应中找到解决方案。

预期输出：60 天：8 小时：9 分钟：剩余 5 秒

    const finishTime = new Date("01/01/2020");
    const currentTime = new Date();

将结果添加到数组以便稍后遍历：

    results.push(differenceInMonths(finishTime, currentTime));
    results.push(differenceInDays(finishTime, currentTime));
    results.push(differenceInHours(finishTime, currentTime));
    results.push(differenceInMinutes(finishTime, currentTime));
    results.push(differenceInSeconds(finishTime, currentTime));

添加手动逻辑以从秒获取时间。显然应该有一个更好的逻辑，使用/不使用该库，这是我所缺少的：

    const monthsRemaining = results[4] / (30 * 24 * 3600); // this will anyways fail as 30 days is not common for every month
    const daysRemaining = (monthsRemaining % 1) * 30;
    const hoursRemaining = (daysRemaining % 1) * 24;
    const minutesRemaining = (hoursRemaining % 1) * 60;
    const …

我正在尝试在作为反应钩子的功能组件中进行 API 调用，并根据结果重新呈现组件的内容。这是代码：

正在调用 API 的组件 -

function IntegrationDownshift() {
    render(
        <Paper square>
            {setResults(inputValue).map(
                (suggestion, index) =>
                    renderSuggestion({
                        suggestion,
                        index,
                        itemProps: getItemProps({
                            item:
                                suggestion.userFullName
                        }),
                        highlightedIndex,
                        selectedItem
                    })
            )}
        </Paper>
    );
}

这是setResults函数：

function setResults(textInput) {
    const [data, setData] = useState({ users: [] });
    searchUser(textInput).then(result => {
        useEffect(() => {
            searchUser(textInput).then(result => {
                setData(result.users);
            });
        }, []);
    });
}

我正在尝试获取状态数据并根据数据重新渲染我的组件。这searchUser是调用外部 API 的操作。

1. 该searchUser呼吁的行动，并成功地获取数据，但我不知道为什么状态得到更新-我得到了下面的错误-

React Hook "useState" 在函数 "setResults" 中调用，它既不是 React 函数组件，也不是自定义 React Hook 函数 …

我将 material-ui 与 React 功能组件一起使用并使用其自动完成组件。我自定义了它，每当我更改输入字段中的文本时，我希望该组件呈现新的搜索结果。

callAPI("xyz")

我在 action 中调用 API 并使用 xyz 参数，我正在从这个函数组件调用 dispatch 方法。

这里的问题是，当组件进行调用时，它应该等待 API 响应然后呈现结果，但它得到了一个未解决的承诺，所以它无法呈现。

<Paper square>
    {callAPI("xyz").results.map(
        result => console.log(result);
    )}
</Paper>

由于结果是一个未解决的承诺，它将无法映射。我需要某种方法来仅在数据可用时调用地图，或者在数据存在之前显示一些文本，然后在获取数据后进行更改。

任何纠正此代码的建议都将非常有帮助。

编辑：

function IntegrationDownshift() {
    return (
        <div>
            <Downshift id="downshift-simple">
                {({
                    getInputProps,
                    getItemProps,
                    getMenuProps,
                    highlightedIndex,
                    inputValue,
                    isOpen,
                    selectedItem
                }) => (
                    <div>
                        {renderInput({
                            fullWidth: true,
                            InputProps: getInputProps({
                                placeholder: "Search users with id"
                            })
                        })}

                        <div {...getMenuProps()}>
                            {isOpen ?
                                 <Paper square>
                                {callAPI(inputValue).users.map(
                                    (suggestion, index) =>
                                        renderSuggestion({
                                            suggestion,
                                            index,
                                            itemProps: getItemProps({
                                                item:
                                                    suggestion.userName
                                            }),
                                            highlightedIndex, …