时间戳

首页 > 解决方案 > SearchBar 在作为 props 以及来自它的父级的 setter 时不会更新值

reactjs - SearchBar 在作为 props 以及来自它的父级的 setter 时不会更新值

问题描述

我希望“SearchBar”（反应原生元素）位于另一个组件中，父组件负责处理内容状态

const SearchScreen = () => {
    const [term, setTerm] = useState('');

    return (
        <View>
            <MySearchbar
                placeholderText="Type your search..."
                onTermChange={(text) => setTerm(text)}
                term={term}
            />
        </View>
    );
};

MySearchBar 在哪里

const MySearchbar = ({ onTermChange, term, placeholderText }) => {
    return (
        <SearchBar
            darkTheme
            placeholder={placeholderText}
            onTextChange={onTermChange}
            value={term}
        />
    );
};

使用这种方法，当我输入某些内容时，值会出现但会立即消失，就好像值项没有用新值更新一样

但是，如果我将 SearchBar 直接放在“SearchScreen”组件上，一切正常

为什么状态值“术语”没有更新？

拉斐尔

标签： reactjsreact-nativecomponentsstatereact-native-android

解决方案

您需要考虑的主要是调用渲染方法。尝试控制台记录搜索栏的设置器，您会看到由于父组件中的状态再次渲染后，它将更改道具，再次渲染并调用设置器。

我的方法是在搜索栏中设置相同的状态并将设置器更改为正确的命名法：onChangeText

推荐阅读