Question

我正在尝试将带有数字的数组传递给应该在我的本地主机“网站”上列出数字的方法。但是由于某种原因，即使我在NumberList函数中传递值，浏览器也会提示未定义属性'props.value'。

如果摆脱了ItemList函数，我可以设法使其工作，而在NumberList函数中创建

代码，但是我想将该函数分成两个部分功能。

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} />;
}
}

预期结果：本地主机页面上列出的数字实际结果：“属性'props.value'未定义”

Answer 1

您正在ListItem函数的参数中使用解构：{props}仅使用props。

Answer 2

您正在破坏function ListItem({props}) {中的道具，这意味着道具实际上将具有props.props是（未定义）的值。要么用价值代替道具，要么不破坏它。

'价值属性未定义'-如何修复未定义的属性？

2 个答案: