ReactJS 中的搜索过滤器

Question

如何使用搜索过滤器：React？

我尝试了以下方法在 reactjs 中使用search effect，但结果并没有出现在我的情况下。我想我在某个地方犯了一个愚蠢的错误，如果有人能弄清楚我想要解决的是什么，那就太好了。

API 端点 URL：http://localhost:8000/api/v1/post_list?search=test

function PostListSearch() {
  const [posts, setPost] = useState([]);
  const [userId, setUserId] = useState([]);
  let signal = axios.CancelToken.source();

  function handleChange(event) {
    setUserId(event.target.value);
  }

  function handleClick(event) {
    axios
      .get(`http://localhost:8000/api/v1/post_list?search=${userId}`, {
        cancelToken: signal.token
      })
      .then(res => {
        const posts = res.data;
        setPost(posts);
      })
      .catch(err => {
        console.log(err);
      });
  }

  return (
    <React.Fragment>
      <div class="theme-layout">
        <div class="topbar stick">
          <div class="top-area">
            <div class="top-search">
              <form>
                <input
                  type="text"
                  name="search"
                  onChange={handleClick}
                  placeholder="Search keyword"
                />
                <button data-ripple>
                  <i class="ti-search"></i>
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        {posts.map(post => (
          <ul key={post.id}>
            <div class="col-lg-8 col-xl-9">
              <img src={post.image} alt="" class="img-fluid" />
              <h3>{post.title}</h3>
            </div>
          </ul>
        ))}
      </div>
    </React.Fragment>
  );
}

export default PostListSearch;

Answer 1

function PostListSearch() {
  const [posts, setPost] = useState([]);
  const [userId, setUserId] = useState([]);
  let signal = axios.CancelToken.source();

  function handleChange(event) {
    setUserId(event.target.value);
  }

  function handleClick(event) {
    event.preventDefault()
    axios
      .get(`http://localhost:8000/api/v1/post_list?search=${userId}`, {
        cancelToken: signal.token
      })
      .then(res => {
        const posts = res.data;
        setPost(posts);
      })
      .catch(err => {
        console.log(err);
      });
  }

  return (
    <React.Fragment>
      <div class="theme-layout">
        <div class="topbar stick">
          <div class="top-area">
            <div class="top-search">
              <form>
                <input
                  type="text"
                  name="search"
                  onChange={handleChange}
                  placeholder="Search keyword"
                />
                <button data-ripple onClick={handleClick}>
                  <i class="ti-search"></i>
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        {posts.map(post => (
          <ul key={post.id}>
            <div class="col-lg-8 col-xl-9">
              <img src={post.image} alt="" class="img-fluid" />
              <h3>{post.title}</h3>
            </div>
          </ul>
        ))}
      </div>
    </React.Fragment>
  );
}

export default PostListSearch;

试试这个兄弟：D

Answer 2

我相信您可以按如下方式更新您的地图逻辑和状态初始化。只需照原样复制粘贴代码，然后尝试我提到的两种方法。

 function PostListSearch() {
  const [posts, setPost] = useState([]);
  const [userId, setUserId] = useState("");  // CHANGE HERE
  let signal = axios.CancelToken.source();

  function handleChange(event) {
    setUserId(event.target.value);
  }

  function handleClick(event) {
    axios
      .get(`http://localhost:8000/api/v1/post_list?search=${userId}`, {
        cancelToken: signal.token
      })
      .then(res => {
        const posts = res.data;
        setPost(posts);
      })
      .catch(err => {
        console.log(err);
      });
  }

  return (
    <React.Fragment>
      <div class="theme-layout">
        <div class="topbar stick">
          <div class="top-area">
            <div class="top-search">
              <form>
                <input
                  type="text"
                  name="search"
                  onChange={handleChange}
                  placeholder="Search keyword"
                />
                <button data-ripple onClick={handleClick}>
                  <i class="ti-search"></i>
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        {
                    posts.map((post) => {<ul key={post.id}>
                        <div class="col-lg-8 col-xl-9">
    
                            <img src={post.image} alt="" class="img-fluid" />
                            <h3>{post.title}</h3>
    
                        </div>
                    </ul>})
                }
      </div>
    </React.Fragment>
  );
}

export default PostListSearch;

另一种解决方案可能是保持初始化并尝试将值推送到数组中。为此，我对 handleChange 方法进行了更改

function PostListSearch() {
      const [posts, setPost] = useState([]);
      const [userId, setUserId] = useState([]);  
      let signal = axios.CancelToken.source();
    
      function handleChange(event) {
let currUser = userId;
currUser.push(event.target.value)
        setUserId(currUser );
      }
    
      function handleClick(event) {
        axios
          .get(`http://localhost:8000/api/v1/post_list?search=${userId}`, {
            cancelToken: signal.token
          })
          .then(res => {
            const posts = res.data;
            setPost(posts);
          })
          .catch(err => {
            console.log(err);
          });
      }
    
      return (
        <React.Fragment>
          <div class="theme-layout">
            <div class="topbar stick">
              <div class="top-area">
                <div class="top-search">
                  <form>
                    <input
                      type="text"
                      name="search"
                      onChange={handleChange}
                      placeholder="Search keyword"
                    />
                    <button data-ripple onClick={handleClick}>
                      <i class="ti-search"></i>
                    </button>
                  </form>
                </div>
              </div>
            </div>
          </div>
    
          <div class="row">
            {
                        posts.map((post) => {<ul key={post.id}>
                            <div class="col-lg-8 col-xl-9">
        
                                <img src={post.image} alt="" class="img-fluid" />
                                <h3>{post.title}</h3>
        
                            </div>
                        </ul>})
                    }
          </div>
        </React.Fragment>
      );
    }
    
    export default PostListSearch;

我相信上述解决方案中的任何一个都应该有效。