javascript - 在参数中传递值时出现错误无法读取未定义的属性“值”

Question

我想要的只是简单地将这个数组作为 Book.js 的参数传递并在 Cart.js 上接收另一个组件，但我在 Cart.js 中不断收到此错误：TypeError：无法读取未定义的属性“值”。

应用程序.js

<Route path='/Cart/:value' render={()=>(
           <div><Header/>
           <Cart/>
           </div>
          )}     
        />

页眉.js

 <div className="header">
                    <Link to ="/">Home</Link>
                    <Link to ="/Books">Books</Link>
                    <Link to="/Cart/value">Cart</Link>
  </div>

Book.js

  { all_books.map((one_book, index) =>
                <div key={index} className="single_book">
                        {/* {Object.values(one_book).map((a_book, index) =>
                        <h4>{a_book}</h4>
                        )}   */}
                    <h3>Book Name :- {one_book[1]}</h3>
                    <h3>Price :- {one_book[2]}</h3>
                    <h3>Author :- {one_book[3]}</h3>
                    <h3>No. of Pages :- {one_book[4]}</h3>


                        <Link  
                        to = {`/Cart/${one_book}`}>

                        Add to Cart

                        </Link>
                    </center>
                </div>
            )} 

购物车.js

  <div>
             {this.props.params.value}
            </div>

标签： javascriptreactjsreact-reduxfrontend

Answer 1

您可以尝试像这样在渲染中传递道具。

<Route path='/Cart/:id' render={(props)=>(
       <div><Header/>
       <Cart id={props.match.params.id} />
       </div>
      )}     
    />

还要确保您传递了正确的 ID。