Question

为什么基于React钩子的React Native Single Functional组件中的回调总是收到 isNameInvalid 变量的不赞成使用的值？

在下面的示例中，即使 onChangeText 回调发生更改，它也始终会收到False。上面的console.log显示正确的值。

为什么会发生以及如何解决？关于闭包吗？
我以为回调在每次重新渲染时都会重新创建自己，因此我希望它会收到正确的值。

import * as React from 'react;
import { View, TextInput } from 'react-native' 

export default function CommunityNameStep(props) {
  const [ communityName, setCommunityName ] = React.useState('');


  const nameLn = communityName.length;
  const isNameInvalid = nameLn > 25;


  // receives Updated and Fresh version
  console.log('render. isNameInvalid ->>> ', isNameInvalid)

  return (
    <View
    >

        <TextInput
          label="Community name"
          onChangeText={(text: string) => {
            // Always receives false even when it true. In short: always Old value
            console.log('CALLBACK ->>> isNameInvalid', isNameInvalid);
              setCommunityName(text);
          }}
        />
    </View>
  );
}

Answer 1

在React中，每当状态更改时都会触发重新渲染。在回调中编写以下行时触发了渲染

setCommunityName(text);

这意味着当回调被触发时，内部的值仍将与上一次渲染的相同。回调结束后，它将重新呈现并更新值。键入使isNameInvalid子句为true的字符时，您应该在控制台日志中看到以下内容：

CALLBACK ->>> isNameInvalid false    // isNameInvalid was false before this callback
render. isNameInvalid ->>> true      // The component has rerendered and the value is now updated

带有钩子的React SFC中的回调接收旧值

1 个答案: