[英]'Property of value undefined' - how to fix undefined props?
I'm trying to pass an array with numbers to a method that should list the numbers on my localhost 'website'. 我试图将带有数字的数组传递给应该在本地主机“网站”上列出数字的方法。 But for some reason the browser prompts that the property 'props.value' is undefined, even though I pass the value in the NumberList function.
但是由于某种原因,即使我在NumberList函数中传递值,浏览器也会提示未定义属性'props.value'。
I can manage to get it to work, if I get rid of ItemList function, and instead creates the 如果摆脱了ItemList函数,我可以设法使其正常工作,而是创建
import React, { Component } from "react"; import "./App.css"; function ListItem({props}) { return <li>{props.value}</li>; } function NumberList({numbers}) { const listItems = numbers.map((number) => <ListItem key={number.toString()} value={number} /> ); return ( <ul> {listItems} </ul> ); } // function NumberList({ numbers }) { // const listItems = numbers.map((number) => // <li key={number.toString()} // > {number}</li> // ); // return listItems; // } function NumberTable({ numbers }) { const tableItems = numbers.map((number) => <table key={number.toString()}> <tbody> <tr> <td>{number}</td> </tr> </tbody> </table> ); return tableItems; } function ListDemo(props) { return ( <div> <h2>All numbers passed in via props</h2> <NumberList numbers={props.numbers} /> </div> ); } export default class App extends React.Component { state = { numbers: [1, 2, 3] } render() { return <ListDemo numbers={this.state.numbers} />; } }
Expected result: listed numbers on the localhost webpage Actual result: 'Property 'props.value' is undefined' 预期结果:在本地主机页面上列出的数字实际结果:“属性'props.value'未定义”
您正在ListItem
函数的参数中使用解构: {props}
仅使用props
。
You're destructing the props in function ListItem({props}) {
which means that props will actually have the value of whatever props.props
is (undefined). 您正在破坏
function ListItem({props}) {
中的props,这意味着props实际上将具有props.props
是什么(未定义)的值。 Either put value instead of props or don't destruct it. 要么用价值代替道具,要么不破坏它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.