文本输入因useState事件而失去焦点

Question

我正在构建一个React组件，该组件使用React ace输入实时呈现的markdown。每次我键入一封信时，都会输入一封信，然后焦点立即发生变化，如果不点击返回编辑器，我就无法再键入。

这是组件的代码：

export default function Edit(props) {
let placeHolder = props.isNew ? md : ""; 
let urlParams = useParams();
let navigate = useNavigate();
let action;
let actionName;
const [contents, setContents] = useState(placeHolder);
const [post, setPost] = useState({});
const [idToken, setIdToken] = useState(null)
Auth.currentSession().then((s) => setIdToken(s.idToken.jwtToken))
if (!props.isNew) {
useEffect(() => {
getPost(urlParams.postId)
.then(post => {
setContents(post.contents);
setPost(post);
});   
}, [props.postId]);
action = () => {
updatePost(post, contents, idToken)
.then(() => navigate('/'))
}
actionName = "Update"
}
else {
action = () => {
newPost(contents, idToken)
.then(() => navigate('/'))
}
actionName = "Create"
}

return (
<Authenticator hideSignUp={true}>
<PageContainer single={true}>
<ActionMenu action={action} cancel={() => navigate('/')}>{actionName}</ActionMenu>
<ContentContainer>
<AceEditor
mode="markdown"
theme="monokai"
onChange={v => {setContents(v)}}
name="editor"
height="100%"
width="60vw"
value={contents}
/>
<MarkdownWrapper>{contents}</MarkdownWrapper>
</ContentContainer>
</PageContainer>
</Authenticator>
)
}

我注意到，从AceEditor组件的onChange道具中删除setContents()调用可以阻止这种情况的发生，这让我相信每次键入时都会重新渲染该组件，从而导致焦点发生变化。我尝试从值道具中删除contents，以防导致重新渲染，但没有任何变化。

每当调用setContents()时，如何停止此组件的重新渲染？

Answer 1

我注意到两个问题：

1. 您在这里进行一个api调用：useEffect之外的Auth.currentSession().then((s) => setIdToken(s.idToken.jwtToken))。对于令牌，您似乎只想在组件装载时调用一次，因此您希望传递一个空数组作为第二个参数。有关更多信息：https://medium.com/nerd-for-tech/fetching-api-using-useeffect-hook-in-react-js-7b9b34e427ca
2. 您在if语句中调用useEffect，这违反了钩子的规则。https://ru.react.js.org/docs/hooks-rules.html

尝试修复这些问题，看看问题是否消失。