为什么我的 if 语句在条件为真时不起作用？

Question

我正在尝试根据我的 selected 属性创建动态字段。我有 2 个数组对象 addAttributes 和 fakeAttributes。 fakeAttributes 是 selected 属性的详细信息。我有一个下拉 select 组件，如果我传递 addAttributes 它将显示数据。如果我 select 来自 select 组件的任何选项，它将存储到 setAttributes 状态。

实时代码：https://codesandbox.io/s/summer-cloud-m0bvn?file=/src/App.js:1247-1678

 const [attributes, setAttributes] = useState([{ label: '', value: 1 }])

    const addAttributes = [
        { label: 'colors', value: 1 },
        { label: 'size', value: 2 },
    ]

    // Attributes data
     const fakeAttributes = [{
        label: 'colors',
        object: [
            { label: 'Black', value: 1 },
            { label: 'Green', value: 2 },
        ]
    },
    {
        label: 'size',
        object: [
            { label: 'M', value: 1 },
            { label: 'S', value: 2 },
        ]
    }
    ]

下拉菜单 UI。我正在为下拉菜单使用 npm i react-select 包。这是我的代码，如果值与标签匹配，我将尝试过滤和映射这些数组对象，它将显示文本但输出未显示，我也没有收到任何错误。条件符合。


<div className='flex flex-row gap-6'>
        <div className="basis-1/4">

            <label className="block text-sm font-medium text-gray-700 mb-3"> Size </label>
            <Select options={addAttributes} onChange={(e: any) => setAttributes(e)} className="shadow appearance-none border rounded w-full text-gray-700 leading-tight focus:outline-none focus:shadow-outline"  isMulti />

        </div>
         {fakeAttributes.map((attr) => {
          attributes.filter((list) => {
            console.log(typeof attr.label,":",attr.label,typeof list.label,":",list.label);
            if (list.label === attr.label) {
              console.log("ok I am in");
              return <h2>Output</h2>;
            }
          });
        })}

    </div>

任何人都可以帮助我吗？我该如何解决？

Answer 1

您的 return 语句在过滤器块的范围内。所以你 returning html 作为过滤方法的布尔值，它永远是真的。然后当过滤完成后，你不会对过滤的项目做任何事情。

如果要return过滤的项目，您必须先结束过滤块，然后找到该项目并return它。

看到这个：

import { useState } from "react";
import Select from "react-select";
import "./styles.css";

export default function App() {
  const [attributes, setAttributes] = useState([{ label: "", value: 1 }]);
  // Data need to break and store label info in another variable and add value dynamically
  const addAttributes = [
    { label: "colors", value: 1 },
    { label: "size", value: 2 }
  ];

  // Attributes data
  const fakeAttributes = [
    {
      label: "colors",
      object: [
        { label: "Black", value: 1 },
        { label: "Green", value: 2 }
      ]
    },
    {
      label: "size",
      object: [
        { label: "M", value: 1 },
        { label: "S", value: 2 }
      ]
    }
  ];
  return (
    <div className="App">
      <div className="flex flex-row gap-6">
        <div className="basis-1/4">
          <label className="block text-sm font-medium text-gray-700 mb-3">
            {" "}
            Size{" "}
          </label>
          <Select
            onChange={(e) => setAttributes(e)}
            className="shadow appearance-none border rounded w-full text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
            options={addAttributes}
            isMulti
          />
        </div>

        {fakeAttributes.map((attr) => {
          const item = attributes.filter((list) => {
            return list.label === attr.label;
          })[0];
         if (item) { 
          console.log("ok I am in");
          return <h2>Output</h2>;
        }
        })}
      </div>
    </div>
  );
}

为什么我的 if 语句在条件为真时不起作用？

Why my if statement is not working while the condition is true?

javascript

arrays

typescript

reactjs

react-typescript