Блог

Я хочу отобразить код react, когда идентификатор в параметрах совпадает с идентификатором в данных, но здесь react пытается отобразить код еще до props.match.params.id выполнения, поэтому выполняется только оператор if, можете ли вы предоставить мне решение для решения этой проблемы.Я даже пробовал использовать useParams() , но это не дает ничего хорошего.

 import data from'./data'
import React  from 'react'



export default function Productdisplay(props) {
 
  const y= props.match.params.id
  const product=data.products.find((x) => x.id===y); //An error lies here

  if(!product){
    return(
      <div>No product to display {}</div>
    )
  }
return(
<>
//Here lies the code I want to render when the ids of the url and data  match 
but as React tries to render the code even before the params is being fetched 
only if statement is being rendered can you give me a solution for this
</>
)
}
 

То, что вы хотите использовать здесь, — это useEffect, который содержит ваши условия / логику, которая будет выполняться при изменении ее недостатков. Здесь это Y. Затем сохраните вывод вашей логики из useEffect в реальное состояние (useState), а не в const . Оттуда вы сможете запустить ожидаемый повторный рендеринг.

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

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

  useEffect(() => {
    const y = props ? .match ? .params ? .id;
    const findProducts = data.products.find((x) => x.id === y);

    if (findProducts !== products) {
      setProducts(products);
    }
  }, [data?.products, props?.match?.params?.id]);

  if(!products) return null; 
  return (
    <div>
      // ...
    </div>
  );
 

Я предлагаю вам прочитать это https://reactjs.org/docs/hooks-effect.html