Блог

Я создаю функцию поиска, в качестве запроса я должен использовать mapStateToProps для получения данных, как мне следует поступить в этом файле?

Это мой код для этого

 import React, { useState, useEffect } from "react";
import useDebounce from "../../custom-hook/index";
import "../Search/index.css";

function Search() {

  // State and setter for search term
  const [searchTerm, setSearchTerm] = useState("");

  // State and setter for search results
  const [results, setResults] = useState([]);

  // State for search status (whether there is a pending API request)
  const [isSearching, setIsSearching] = useState(false);

  // Run every 5ms
  const debouncedSearchTerm = useDebounce(searchTerm, 500);

  // Here's where the API call happens
  // We use useEffect since this is an asynchronous action
  useEffect(
    () => {
      // Make sure we have a value (user has entered something in input)
      if (debouncedSearchTerm) {
        // Set isSearching state
        setIsSearching(true);
        // Fire off our API call
        searchCharacters(debouncedSearchTerm).then(results => {
          // Set back to false since request finished
          setIsSearching(false);
          // Set results state
          setResults(results);
        });
      } else {
        setResults([]);
      }
    },
    // This is the useEffect input array
    [debouncedSearchTerm]
  );

  // Pretty standard UI with search input and results
  return (
    <div>
      <input
        placeholder="Search..."
        className="search"
        onChange={e => setSearchTerm(e.target.value)}
      />

      {isSearching amp;amp; <div>Searching ...</div>}

      {results.map(result => (
        <div key={result.id}>
          <h4>{result.title}</h4>
          <img
            src={`${result.thumbnail.path}/portrait_incredible.${
              result.thumbnail.extension}`}
            alt="something"
          />
        </div>
      ))}
    </div>
  );
}
 // API search function
    function searchCharacters(search) {
      console.log(search);
   }
    
    export default Search;
  

Как видно из моего кода выше, в ответ у меня есть isSearching функция, она устанавливается useState, но теперь мне это не нравится, я должен настроить mapSateToProp для получения реквизита из хранилища

Пожалуйста, помогите мне за это, большое вам спасибо

Этот фрагмент кода взят из документации по react-redux. Вы должны импортировать connect функцию из этой библиотеки, а затем обернуть свой компонент.

 function mapStateToProps(state) {
  const { todos } = state
  return { todoList: todos.allIds }
}

export default connect(mapStateToProps)(TodoList)
  

Обновлено:

Поскольку вы используете хуки, useSelector может работать лучше для вас.