React Native SearchBar 错误:道具类型失败:提供给 `ForwardRef(TextInput)` 的 `array` 类型的无效道具 `value`,预期为 `string`

时间:2021-06-02 20:19:37

标签: javascript reactjs react-native

我不知道这个错误是什么意思。前一阵子一切正常,我没有碰这段代码。我回到这个页面,我收到这个错误:

Failed prop type: Invalid prop `value` of type `array` supplied to `ForwardRef(TextInput)`, expected `string`

这与搜索栏有关,但我不知道是什么。

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, SafeAreaView, Image } from 'react-native';
import { Card, SearchBar } from 'react-native-elements'
import { styles } from './styles.js';

const FormsScreen = ({navigation, route}) => {

  const [formsArray, setFormsArray] = useState([]);
  const [search, setSearch] = useState([null]);
  
  //Fetch all users from database
  useEffect(() =>{
    fetch('http://10.0.2.2:5000/forms').then(response =>{
      if(response.ok){
        return response.json();
      }
    }).then(data => setFormsArray(data));
  }, []);


  return (

      <SafeAreaView>
        <SearchBar
        placeholder="Type Here..."
        onChangeText={ (text) => {setSearch({text}); } }
        value={search}
      />
   
        <FlatList 
        keyExtractor={(item) => item.ID.toString() }
        // style = {styles.List}
        data={formsArray}
        renderItem={({item}) => (
          <Card>
            <Card.Title>{item.ID}</Card.Title>
            <Card.Divider/>
            <View style={styles.Container}>
              <Text>{item.Comments}</Text>
              {/* <Image source={require('./System apps/Media Manager/Gallery/AppPhotos/45e5cefd-7798-4fe9-88de-86a0a15b7b9f.jpg')} /> */}
              <Text>{item.RoadName}</Text>
            </View>

            <View style={styles.ListContainer}>
              <Text style={styles.LabelText}>Name</Text>
              <Text style={styles.LabelText}>Phone</Text>
              <Text style={styles.LabelText}>Email</Text>
            </View>
            <View style={styles.ListContainer}>
              <Text style={styles.CardText}>{item.Name}</Text>
              <Text style={styles.CardText}>{item.Phone}</Text>
              <Text style={styles.CardText}>{item.Email}</Text>
            </View>
          </Card>
        )}
        />
     </SafeAreaView>

  );
}

export default FormsScreen;

这里到底发生了什么?

1 个答案:

答案 0 :(得分:1)

试试这个

const [search, setSearch] = useState({text: ''});



<SearchBar
        placeholder="Type Here..."
        onChangeText={ (text) => {setSearch({text}); } }
        value={search.text}
      />