小编iam*_*ynq的帖子

我有一个[slug].js页面可以获取 API 以获取目标页面

export async function getServerSideProps({ query, res }) {
    const slug = query.slug;
    try {
        const destination = await RoutingAPI.matchSlug(slug);
        res.writeHead(302, { Location: destination });
        res.end();
        // return {
        //     redirect: {
        //         permanent: true,
        //         destination,
        //     },
        // }
    } catch (error) {
        return {
            notFound: true
        }
    }
}

如果我客户端从另一个页面重定向到 slug 页面，它会起作用并使 URL 与 slug 保持相同，但它会使浏览器重新加载。如果我使用

return {
     redirect: {
        permanent: true,
        destination,
     },
}

它不会重新加载浏览器，但会将 URL 更改为目标，与 slug 不同。我该如何解决这个问题？我将不胜感激任何想法，谢谢

console.log('1');
await get()
    .then()
    .catch(() => {
        console.log('2');

        return;
    });
console.log('3');

为什么控制台记录 1 2 3？我想在return语句之后，代码不会被执行？

我想测试页面在点击 div 后被重定向，但我不知道如何，这是我的代码。非常感谢

<div className="bellTest">
   <NextLink href="/notifications">
       <Bell />
   </NextLink>
 </div>

测试.tsx

jest.mock('next/link', () => {
     return ({ children }) => {
            return children;
     };
});

describe('Test of <HeaderContainer>', () => {
    test('Test the page redirect after click', async done => {
        const wrapper = mount( <HeaderComponent /> );
        await wrapper
            .find('.bellTest')
            .at(0)
            .simulate('click');
        // expect the page getting redirect
    });
});

据我了解，useImperativeHandle帮助父组件能够调用其子组件的函数。您可以在下面看到一个简单的示例

const Parent = () => {
    const ref = useRef(null);
    const onClick = () => ref.current.focus();

    return <>
        <button onClick={onClick} />
        <FancyInput ref={ref} />
    </>
}

function FancyInput(props, ref) {
    const inputRef = useRef();
    useImperativeHandle(ref, () => ({
      focus: () => {
        inputRef.current.focus();
      }
    }));
    return <input ref={inputRef} />;
}

FancyInput = forwardRef(FancyInput);

但仅使用它就可以轻松实现useRef

const Parent = () => {
    const ref = useRef({});
    const onClick = () => ref.current.focus();

    return <>
        <button onClick={onClick} />
        <FancyInput …

一旦用户单击该特定项目，我就尝试删除该列表项目。

我创建了一个函数来进行样式更改

const completed = () =>{
     return document.getElementById("demo").style.textDecoration='line-through'
};

列表生成如下，我使用了material ui库

 <List dense={dense} >
      {items.slice(0).reverse().map(x=> (
           <ListItem key={x.id} button id="demo" onClick={completed} divider>
                 <ListItemText primary={listItems(x)}/>
                 <ListItemSecondaryAction />
           </ListItem>

       ))}                              
</List>

从我编写的代码中，我只能删除列表的第一项。每当我添加新项目时，我唯一能够删除的项目总是第一个项目。

我正在尝试找到一种方法将其应用于列表中的所有元素

正如标题所述，我需要在 axios 调用函数之后刷新页面，但不是在收到承诺之前。函数触发后页面当前正在刷新，但未收到承诺。我想要做的是向 api 提交一篇博客文章，当我在最后添加 preventDefault 函数时，一切正常。

这里的功能：

handleSubmit(event){
    axios.post("https://saulvegablog.devcamp.space/portfolio/portfolio_blogs", this.buildForm(), {withCredentials:true})
    .then(response => {
      this.props.handleSuccessfullFormSubmission(response.data);
    }).catch(error => {
        console.log("handlesubmit error for blog ", error)
    })
    event.preventDefault();
}