javascript - “属性值未定义” - 如何修复未定义的属性？

Question

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

如果我摆脱 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。