我可以在我的反应应用程序中搜索存储在谷歌存储桶中的一些文件吗？

Question

我有一个反应应用程序，将一些文件存储在谷歌云“Bucket”中，所以我想知道是否可以搜索存储在我的 React 应用程序内的“Bucket”中的一些文件，我不知道确切的名称是什么其中，我可以这样做吗？ 如果是，以什么方式？ 如果您有任何教程，我将不胜感激。

我所说的搜索是这个列表和过滤器：

提前致谢。

Answer 1

“搜索”是什么意思？如果您已经知道要查找的名称，可以尝试打开该文件。如果失败，它要么不存在，要么你没有打开它的权限。

如果您想在打开之前查看它是否存在，这应该为您指明正确的方向：

from google.cloud import storage
client = storage.Client()

blobs = client.list_blobs('your_default_bucket')

filenames = []
for blob in blobs:
    filenames.append(blob.name)
    
print(filenames)

file_exists = 'my_file.csv' in filenames

print(f"file_exists: {file_exists}")

Answer 2

对于这种情况，最好使用第 3 部分库。 react-autosuggest 可以满足您的需求。

基本用法：

import Autosuggest from 'react-autosuggest';
 
// Imagine you have a list of languages that you'd like to autosuggest.
const files = [
  {
    name: 'file1'
  },
  {
    name: 'file2'
  },
  ...
];
 
// Teach Autosuggest how to calculate suggestions for any given input value.
const getSuggestions = value => {
  const inputValue = value.trim().toLowerCase();
  const inputLength = inputValue.length;
 
  return inputLength === 0 ? [] : languages.filter(lang =>
    lang.name.toLowerCase().slice(0, inputLength) === inputValue
  );
};
 
// When suggestion is clicked, Autosuggest needs to populate the input
// based on the clicked suggestion. Teach Autosuggest how to calculate the
// input value for every given suggestion.
const getSuggestionValue = suggestion => suggestion.name;
 
// Use your imagination to render suggestions.
const renderSuggestion = suggestion => (
  <div>
    {suggestion.name}
  </div>
);
 
class Example extends React.Component {
  constructor() {
    super();
 
    // Autosuggest is a controlled component.
    // This means that you need to provide an input value
    // and an onChange handler that updates this value (see below).
    // Suggestions also need to be provided to the Autosuggest,
    // and they are initially empty because the Autosuggest is closed.
    this.state = {
      value: '',
      suggestions: []
    };
  }
 
  onChange = (event, { newValue }) => {
    this.setState({
      value: newValue
    });
  };
 
  // Autosuggest will call this function every time you need to update suggestions.
  // You already implemented this logic above, so just use it.
  onSuggestionsFetchRequested = ({ value }) => {
    this.setState({
      suggestions: getSuggestions(value)
    });
  };
 
  // Autosuggest will call this function every time you need to clear suggestions.
  onSuggestionsClearRequested = () => {
    this.setState({
      suggestions: []
    });
  };
 
  render() {
    const { value, suggestions } = this.state;
 
    // Autosuggest will pass through all these props to the input.
    const inputProps = {
      placeholder: 'Type a programming language',
      value,
      onChange: this.onChange
    };
 
    // Finally, render it!
    return (
      <Autosuggest
        suggestions={suggestions}
        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
        getSuggestionValue={getSuggestionValue}
        renderSuggestion={renderSuggestion}
        inputProps={inputProps}
      />
    );
  }
}

查看演示 here also