javascript - 我需要帮助修复列表数组中的错误

Question

我的代码社区我的搜索栏中有一个错误。该应用程序非常简单...每次用户创建名称时，它都会显示在列表数组中。我的问题是，当用户创建一个名称时，该名称不会显示我的列表，但当我搜索该名称时，它会显示列表。

这里有视频，以便您更好地理解 https://www.youtube.com/watch?v=WIM-H4xXqMw

和代码。我的搜索栏中需要帮助并在单击按钮时显示列表

FolderHome.js - component

const [folder, emptyFolder] = useState([]);
const data = folder;

const [searchTerm, setSearchTerm] = useState("");
let [filteredData, setFilteredData] = useState(data);

//this function is when the user press the button we want to use the folderName(value) and display in a list.
//then when we add a foldername we update and add a new folder name.
//To understand I am just adding a folder name into my empty array. Now my array as a Folder inside.

const addFolder = (folderName) => {
    emptyFolder((currentFolder) => [
      ...currentFolder,
      { id: Math.random().toString(), value: folderName },
    ]);
  };

//Search
  const _searchFilterFunction = (event, data) => {
    let newData = [];
    setSearchTerm({ searchTerm: event });
    if (event) {
      newData = data.filter((item) => {
        const textData = event.toUpperCase();
        const nameFolder = item.value.toUpperCase();
        return nameFolder.includes(textData);
      });
      setFilteredData([...newData]);
    } else {
      setFilteredData([...data]);
    }
  };

return (
    <View style={styles.HomeContainer}>
      <TextInput
        underlineColorAndroid="transparent"
        autoCapitalize="none"
        placeholderTextColor="#9a73ef"
        style={styles.search}
        placeholder="Search"
        onChangeText={(value) => {
          _searchFilterFunction(value, data);
        }}
      />
      <FolderInput myFolder={addFolder} />

      {filteredData.map((item, index) => {
        return <Text key={item.id}>{item.value}</Text>;
      })}
    </View>
  );
};

FolderInput.js - 组件

const FolderInput = (props) => {
  //This function we handle the input and output off Folder
  const [outputFolder, inputFolder] = useState("");

  //This arrow function is handling the folder name on onChangeText in TextInput
  const folderName = (entereName) => {
    inputFolder(entereName);
  };

  //Function to clear input when done enter folder name
  const clearInput = () => {
    props.myFolder(outputFolder);
    inputFolder("");
  };

  return (
    // TouchableWithoutFeedback allow to register a touche withou nothing happen to it
    <View style={styles.outputContainer}>
      <TouchableWithoutFeedback
        onPress={() => {
          Keyboard.dismiss();
        }}
      >
        <View style={styles.containerFolder}>
          <TextInput
            blurOnSubmit
            placeholder="Create Folder"
            style={styles.containerTextInput}
            onChangeText={folderName}
            //we pass the name folder into is value by biding and store into outputFolder
            value={outputFolder}
          />
          <TouchableOpacity>
            <AntDesign
              onPress={clearInput}
              name="addfolder"
              backgroundColor="black"
              size={30}
            />
          </TouchableOpacity>
        </View>
      </TouchableWithoutFeedback>
    </View>
  );
};

export default FolderInput;

非常感谢您提前所做的所有辛勤工作:)

Answer 1

您不应该将filteredData 作为状态。它是 searchTerm 和文件夹的计算结果。只需将其声明为:

const filteredDate = folder.filter((item) => {
        const textData = searchTerm.toUpperCase();
        const nameFolder = item.value.toUpperCase();
        return nameFolder.includes(textData);
      });

您可以在这个小吃中看一下搜索的简单实现: https://codesandbox.io/s/cocky-cori-n704s?file=/src/App.js