Question

所以我试图在我的 React Native 应用程序中做一些非常简单的事情，但它似乎无法正常工作。我的本机应用程序中有一个组件，允许用户创建帖子。用户可以简单地输入他们想要的文本作为他们帖子的正文。当然，我已决定为此使用 TextInput 组件，并且我正在使用 onChangeText={text => onChangeText(text)} 设置我的身体状态。当我点击标题右上角的 create_post 按钮时，我会得到 "" 作为正文的值。

我的整个应用程序中还有其他文本输入组件可以按预期工作，但由于某种原因，这个组件不是。我在网上找了遍，似乎没有人有这个问题。他们只在类组件中有问题，而不是像我这里的功能组件：

import React,{useLayoutEffect,useState} from 'react'
import { TextInput,ScrollView } from 'react-native'
import { Button } from './../components/Button';

const CreatePost = ({navigation,route}) => {
    const [body,onChangeText] = useState('');
    const [media,setMedia] = useState('');

    useLayoutEffect(() => {
        navigation.setOptions({
            title: 'New Post',
            headerRight: () => (
                <Button style={{marginRight:40,fontSize:20}} title="Post" textColor="#0d00ff" onPress={create_post} />
            )
        })
    },[])

    const create_post = () => {
        const timestamp = new Date().toISOString().split('.')[0];

        console.log({body});  // expected: 'some text', result:""
        const post = {
            pid: 0,
            username: 'head_honcho',
            body: body
        }
        
        // makes call to database
        navigation.navigate('HomeTab',{screen: 'Home',params:{post:post}});

    }

    return (
        <ScrollView style={{padding:16}}>
            <TextInput placeholder="What's happening?" keyboardType="default" value={body} style={{fontSize:20}} onChangeText={text => onChangeText(text)}/>
            {/* <TouchableOpacity style={{justifyContent:'center',alignItems:'center', position:'absolute',bottom:0,left:0,right: 0}}>
                <FontAwesome5 name="photo-video" size={20} />
                <Text>Add Media</Text>
            </TouchableOpacity> */}
        </ScrollView>
    )
}

export default CreatePost

我认为这看起来很简单，我觉得问一个如此基本的问题很傻。我唯一的另一个想法是它与 useLayoutEffect 有关，并且当 create_post 被调用时，它只能访问初始状态而不是更新的状态。如果有人对我做错了什么有任何想法，那就太好了。 TIA！

编辑

就在发布这篇文章后不久，我决定看看如果让 useLayoutEffect 检查我的 body 变量中的更新会发生什么。果然，帖子的正文确实通过了它应该有的。

useLayoutEffect(() => {
        navigation.setOptions({
            title: 'New Post',
            headerRight: () => (
                <Button style={{marginRight:40,fontSize:20}} title="Post" textColor="#0d00ff" onPress={create_post} />
            )
        })
    },[body])

但我还是想知道这是为什么？为什么 onChangeText 没有像 react 文档中提到的那样设置我的 body 变量？

Answer 1

你也可以这样做。

useLayoutEffect(() => {
    navigation.setOptions({
        title: 'New Post',
    })
 },[])

useEffect(() => {
    navigation.setOptions({
        headerRight: () => (
            <Button style={{marginRight:40,fontSize:20}} title="Post" textColor="#0d00ff" onPress={create_post} />
        )
 },[body])

这样只会重新渲染按钮

React Native：onChangeText 未更新挂钩状态

1 个答案: