如何在 ReactJS 中获取 api 过滤器数据？答案

【问题标题】：how to fetch api filter-data in ReactJS?如何在 ReactJS 中获取 api 过滤器数据？
【发布时间】：2020-04-22 11:14:50
【问题描述】：

我有这样的过滤数据端点-

localhost:8000/api/p_list?product_category=&color=&size=

每当用户过滤数据时，输出将如下所示，

localhost:8000/api/p_list?product_category=1&color=1&size=2

结果的输出来自根据用户请求获取的过滤器ID。每当用户根据reactjs中的过滤器请求id时如何获取值？

我可能是 reactjs 的新手。我正在努力解决这个问题，如果有人能帮助我解决我想要做的事情，那就太好了。非常感谢您。

我尝试解决的方法，

import React, {useEffect, useState} from "react";
import axios from 'axios';

function PostListPageByUser() {
    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/p_list?product_category=${id}&color=${Id}&size=${Id}`, {
            cancelToken: signal.token,
        })
            .then(res => {
                const posts = res.data;
                setPost(posts);
            }).catch(err => {
            console.log(err);
        });
    }

 return (
  <div>

        <div class="product_sidebar">


              <div class="single_sedebar">
                  <div class="select_option">
                      <div class="select_option_list">Category <i class="right fas fa-caret-down"></i> </div>
                      <div class="select_option_dropdown">

                            {product_categoryData.map(product_categoryData => (

                              <p onClick={useEffect}>{product_categoryData.category_title}</p>

                              ))} 
                      </div>
                  </div>
              </div>


              <div class="single_sedebar">
                  <div class="select_option">
                      <div class="select_option_list">Color <i class="right fas fa-caret-down"></i> </div>
                      <div class="select_option_dropdown">
                          {filter_colorData.map(filter_colorData => (

                              <p onClick={useEffect}>{filter_colorData.color_title}</p>

                          ))}
                      </div>
                  </div>
              </div>


              <div class="single_sedebar">
                  <div class="select_option">
                      <div class="select_option_list">Size <i class="right fas fa-caret-down"></i> </div>
                      <div class="select_option_dropdown">
                          {filter_sizeData.map(filter_sizeData => (

                              <p onClick={useEffect}>{filter_sizeData.size_title}</p>

                          ))}
                      </div>
                  </div>
              </div>

        </div>

  </div>
  );
};

export default PostListPageByUser;

【问题讨论】：

这里到底是什么问题，你不能过滤，或者显示数据吗？您也可以在 get 调用中使用参数来传递您的数据！

标签： javascript reactjs

【解决方案1】：

尝试将类别大小和颜色的值存储在 state 中，并在 useEffect 挂钩中进行 api 调用，该挂钩将在每次这些值之一的状态发生变化时运行。

一般来说：

function PostListPageByUser() {
    const [posts, setPost] = useState([]);
    const [category, setCategory] = useState('');
    const [color, setColor] = useState('');
    const [size, setSize] = useState('');
    let signal = axios.CancelToken.source();

    function handleChange(event) {
        setUserId(event.target.value);
    }
    useEffect(() => { axios.get(`http://localhost:8000/api/p_list?product_category=${category}&color=${color}&size=${size}`, {
            cancelToken: signal.token,
        })
            .then(res => {
                const posts = res.data;
                setPost(posts);
            }).catch(err => {
            console.log(err);
        })}, [size,color,category])

并在您的表单中修改状态

【讨论】：

【解决方案2】：

import React, {useEffect, useState} from "react";
import axios from 'axios';

function PostListPageByUser() {
    const [posts, setPost] = useState([]);
    const [userId, setUserId] = useState([]);
    const [productCategory, setProductCategory] = useState(null);
    const [productColor, setProductColor] = useState(null);
    const [productSize, setProductSize] = useState(null);
    let signal = axios.CancelToken.source();

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

    function handleClick() {
        axios.get(`http://localhost:8000/api/p_list?product_category=${productCategory}&color=${productColor}&size=${productSize}`, {
            cancelToken: signal.token,
        })
            .then(res => {
                const posts = res.data;
                setPost(posts);
            }).catch(err => {
            console.log(err);
        });
    }
    useEffect(
    () => {
      handleClick();
    },
    [productCategory,productColor,productSize],
  );

 return (
  <div>

        <div class="product_sidebar">


              <div class="single_sedebar">
                  <div class="select_option">
                      <div class="select_option_list">Category <i class="right fas fa-caret-down"></i> </div>
                      <div class="select_option_dropdown">

                            {product_categoryData.map(product_categoryData => (

                              <p onClick={setProductCategory(product_categoryData.category_title)}>{product_categoryData.category_title}</p>

                              ))} 
                      </div>
                  </div>
              </div>


              <div class="single_sedebar">
                  <div class="select_option">
                      <div class="select_option_list">Color <i class="right fas fa-caret-down"></i> </div>
                      <div class="select_option_dropdown">
                          {filter_colorData.map(filter_colorData => (

                              <p onClick={setProductColor(filter_colorData.color_title)}>{filter_colorData.color_title}</p>

                          ))}
                      </div>
                  </div>
              </div>


              <div class="single_sedebar">
                  <div class="select_option">
                      <div class="select_option_list">Size <i class="right fas fa-caret-down"></i> </div>
                      <div class="select_option_dropdown">
                          {filter_sizeData.map(filter_sizeData => (

                              <p onClick={setProductSize(filter_sizeData.size_title)}>{filter_sizeData.size_title}</p>

                          ))}
                      </div>
                  </div>
              </div>

        </div>

  </div>
  );
};

应该发生以下步骤：-

Onclick 设置状态 2.状态变更调用API

【讨论】：

product_categoryData、filter_colorData、filter_sizeData 未定义。
我将这些值作为常量参数，但这仍然不起作用。 const Data = ({ results }) => { if(!results){ return '' } const { product_categoryData, product_priceData, filter_colorData, filter_sizeData} = results;

【解决方案3】：

您的 onClick 属性在更改时没有触发有几个原因。

您直接在 onClick 中调用 useEffect，即使您没有在代码中定义它。
您没有使用useState 在代码中的任何位置设置类别、颜色或大小以使用它进行异步调用。

import React, { useEffect, useState } from "react";
import axios from "axios";

function PostListPageByUser() {
  const [posts, setPost] = useState([]);
  const [userId, setUserId] = useState([]);
  const [categoryTitle, setCategoryTitle] = useState("");
  const [color, setColor] = useState("");
  const [size, setSize] = useState("");
  let signal = axios.CancelToken.source();

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

  async function handleClick(event) {
    try {
      const response = await axios.get(
        `http://localhost:8000/api/p_list?product_category=${categoryTitle}&color=${color}&size=${size}`,
        {
          cancelToken: signal.token,
        }
      );
      setPost(response.data);
    } catch (error) {
      console.log(error);
    }
  }

  useEffect(() => {
    this.handleClick();
  }, [categoryTitle, color, size]);

  return (
    <div>
      <div class="product_sidebar">
        <div class="single_sedebar">
          <div class="select_option">
            <div class="select_option_list">
              Category <i class="right fas fa-caret-down"></i>{" "}
            </div>
            <div class="select_option_dropdown">
              {product_categoryData.map((product_categoryData) => (
                <p
                  onClick={setCategoryTitle(
                    product_categoryData.category_title
                  )}
                >
                  {product_categoryData.category_title}
                </p>
              ))}
            </div>
          </div>
        </div>

        <div class="single_sedebar">
          <div class="select_option">
            <div class="select_option_list">
              Color <i class="right fas fa-caret-down"></i>{" "}
            </div>
            <div class="select_option_dropdown">
              {filter_colorData.map((filter_colorData) => (
                <p onClick={setColor(filter_colorData.color_title)}>
                  {filter_colorData.color_title}
                </p>
              ))}
            </div>
          </div>
        </div>

        <div class="single_sedebar">
          <div class="select_option">
            <div class="select_option_list">
              Size <i class="right fas fa-caret-down"></i>{" "}
            </div>
            <div class="select_option_dropdown">
              {filter_sizeData.map((filter_sizeData) => (
                <p onClick={setSize(filter_sizeData.size_title)}>
                  {filter_sizeData.size_title}
                </p>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default PostListPageByUser;

【讨论】：

和以前一样，我得到的是一个空白页。我是 reactjs 的新手。我没有明白我在代码中做错了什么。
是的，我明白了，没关系。慢慢地，如果你能理解错误，你就会变得更好。
我认为您得到空白页的原因是，您需要在 <Route /> 组件中指定路径。
你好，你能在沙箱环境下运行这段代码并测试一下吗？