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

Question

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

我可以设法让它工作，如果我摆脱ItemList函数，而是创建

code in the NumberList function, but I want to split the function into two functions.

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

预期结果：localhost网页上列出的数字实际结果：'Property'props.value'未定义'

Answer 1

你正在破坏function ListItem({props}) {中的道具，这意味着道具实际上具有任何props.props的值（未定义）。要么设置价值而不是道具，要么不破坏它。

Answer 2

你在ListItem函数的参数中使用了解构：{props}只使用props。