反应带钩子过滤多个JSON请求

时间:2020-10-14 10:01:19

标签: javascript json reactjs cloudinary

我正在尝试制作一个包含多个过滤器的过滤器。 用户可以选择“大/不大”和“重/不重” 每个过滤器都会加载一个JSON文件。但是,我想合并这些JSON结果,比如说我想要大而沉重,我想要显示同时出现在大沉重中的结果。

我认为我必须以某种方式..onClick = {将json添加到主数组}->仅保留重复项->返回仅包含重复项的json

const Filters = ({doorHook}) => {
  const { setMainDoorList, select, setSelect } = doorHook;
  }
  const handleSelectChange = event => {
    const value = event.target.value;
    setSelect(value);
    setMainDoorList(value);
  };
  return (
    <Wrapper>
      <Item active={select === "big"}>
        <RadioButton
          type="radio"
          name="radio"
          value="main"
          checked={select === "big"}
          onChange={event => handleSelectChange(event)}
          />
        <RadioButtonLabel />
        <div>Big</div>
      </Item>
      <Item active={select === "heavy"}>
        <RadioButton
          type="radio"
          name="radio"
          value="heavy"
          checked={select === "heavy"}
          onChange={event => handleSelectChange(event)}
          />
        <RadioButtonLabel />
        <div>Heavy</div>
      </Item>
    </Wrapper>
  );
};

export {Filters};

对于要提取的每个JSON,我使用以下代码:

useEffect(() => {
    const fetchMainDoors = async () => {
      setLoading(true);
      try {
        await getDoorsByProducer(mainDoorList).then(res => {
          if (res.status === 200) {
            setMainDoors(res.data.resources);
          } else {
            // Handle error
            setMainDoors([]);
          }
        }) 
      } catch(err) {
        // TODO: Catch error
        setMainDoors([]);
      }
      setLoading(false);
    }
    if (!mainDoorList) return;
    fetchMainDoors();
  }, [mainDoorList])

这是JSON的示例:

{"resources":[
{"public_id":"swedoor_debussy/Classic_Debussy_NCS_S_4050"},{"public_id":"swedoor_debussy/Classic_Debussy_NCS_S_7000"} 
}

1 个答案:

答案 0 :(得分:0)

如果您正在使用Cloudinary,请尝试查找重复项。您可能要使用pHase: https://cloudinary.com/blog/how_to_automatically_identify_similar_images_using_phash