find 方法在我的 React 应用程序中不起作用

Question

function ProductScreen(props) {
  console.log(props.match.params.id);
  const product = data.products.find((x) => x.id === props.match.params.id);
 console.log(product);
  return (
    <div>
      <h1>{product}</h1>
    </div>
  );
}

In the console of the product, it says undefined.

Answer 1

I had a similar problem with my React App. When I deployed it to Host server as "... pageData.find((x) => x.id === parseInt(id)); " it returned undefined , but it worked fine in local server. I doubt it and changed to == and it worked fine. There might be a bug or something.

Answer 2

function ProductScreen(props){
   console.log(props.match.params.id);
   const product = data.products.find( x => x._id === props.match.params.id);
   console.log(product);
   return <div>
      <h1>{product.name}</h1>
   </div>
 }

This is working fine you can give product.name or product.id..

Answer 3

You need to make sure that you are comparing the same data type between the data.products and props.match.params.id.

The datatype of props.match.params.id is a string. Hence, the data.products.id should be also a string.

Answer 4

Because props.match.params.id is string and x.id is number that is why it is undefined you should convert props.match.params.id to number

 function ProductScreen(props) {
 const id = Number(props.match.params.id);
 const product = data.products.find((x) => x.id === id);

 return (
  <div>
   <h1>{product}</h1>
  </div>
   );
 }

Answer 5

Use x._id.toString()===match.params.id

Answer 6

const product = data.products.find((x) => x._id == props.match.params.id);

Use == instead of ===