如何在React中使用地圖內的條件渲染

我有一個反應頁面，它正在呈現從 GraphQL API 回傳的產品串列。一旦產品回傳，我將它們存盤在一個狀態，然后呈現它們。如何只渲染滿足特定條件的產品？

現在，我正在映射產品并渲染每個產品。這作業正常。但是如果我嘗試使用條件陳述句，我的 IDE 就會出錯。這是我目前擁有的代碼。這是目前作業：

async function contactAPI() {
  return await axios({
    url: 'https://graphqlexample.com/api/products',
    method: 'post',
    data: {
      query: `
      QUERY GOES HERE
        `
    }
  })
}

function App() {  
  const [products, setProducts] = useState([]);

  useEffect(() => {
    async function getData() {
      const res = await contactAPI();
      setProducts(res.data.data.products);
    }
    getData();
  }, []);

  return (
    <div>
        <div>          
          {products.map(p =>           
          (             
          <div>            
            <ProductCard productName={p.productName} />
          </div>
          ))}
        </div>    
    </div>
  );
} 

我需要檢查p.productName它是否滿足某些條件，如果滿足，則渲染它。如果沒有，請不要渲染。我嘗試在 中使用不同的條件map，但不斷出現錯誤。

uj5u.com熱心網友回復：

例如，您可以只回傳JSX是否滿足特定條件：

注意：出于演示目的，我使用了includes方法。您可以指定條件

(<div><ProductCard productName={p.productName} /></div>)

并且只有在第一個條件是 true

  <div>
    {products.map((p) => (
      p.productName.includes("free") && (<div><ProductCard productName={p.productName} /></div>)
    ))}
  </div>

export default function App() {
  const arr = [1, 2, 3, 4, 5];
  return (
    <div>
      {arr.map((n) => {
        return n % 2 === 0 && <div key={n}>{n}</div>;
      })}
    </div>
  );
}

uj5u.com熱心網友回復：

map 將始終回傳相同長度的陣列，因此您將根據不是最佳的條件回傳一些空元素。

相反filter，首先是資料，然后 map是回傳的陣列。這樣，您只需映射需要顯示的資料。

const { useState } = React;

function App({ data }) {

  const [ products, setProducts ] = useState(data);

  // In this example we take the list of products in
  // state and return a new array of only those products
  // that aren't soap. We then `map` over that array in our
  // component render
  function getFilteredProducts() {
    return products.filter(product => {
      const name = product.productName.toLowerCase();
      return !name.includes('soap');
    });
  }

  // Get an array of filtered products and then `map` over it
  // to produce the product cards
  return (
    <div>
      {getFilteredProducts().map(product => {
        return (
          <ProductCard
            key={product.id}
            id={product.id}
            name={product.productName}
          />
        );
      })}
    </div>
  );
};

function ProductCard({ id, name}) {
  return <div>{id}: {name}</div>;
}

const data=[{id:1,productName:"Blue Soap"},{id:2,productName:"Beans"},{id:3,productName:"Green Soap"},{id:4,productName:"Sponge"},{id:5,productName:"Chicken"}];

ReactDOM.render(
  <App data={data} />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

uj5u.com熱心網友回復：

{
    products.map(id => {
      return condition == true ?
        <div>            
          <ProductCard productName={p.productName} />
        </div>
    : <div></div>
})}

uj5u.com熱心網友回復：

const products = [
  { productName: "product1" },
  { productName: "product2" },
  { productName: "product3" }
];

const App = () => {
  return (
    <div className="App">
      <div>
        {products.map((p, index) => {
          if (p.productName === "product1") {
            return <div key={index}>{p.productName}</div>;
          }
          return <React.Fragment></React.Fragment>;
        })}
      </div>
    </div>
  );
}

ReactDOM.render(
    <App />,
    document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

標籤：javascript 反应

上一篇：無效的鉤子呼叫。怎么打電話給快遞？

下一篇：在MERN中插入資料時req.body()變空