时间戳

首页 > 解决方案 > .map 渲染空列表（只是要点）

reactjs - .map 渲染空列表（只是要点）

问题描述

希望有人可以帮助我解决我遇到的这个问题。基本上，我正在创建一个预算应用程序。您输入您的预算、项目名称和成本并提交。然后它将在应用程序底部打印（不同的组件），我将对剩余预算等进行一些计算。

我目前坚持将值从我的有状态组件传递到我的功能组件。我已经成功地通过道具传递数据并遍历它们。但是，它不是以 li 格式输出我需要的数据，而是仅输出 li 要点。如果我将返回的输出更改为文本，它会以 li 格式呈现文本（console.log 也可以），但由于某种原因，如果我试图输出它不会的道具。

任何帮助表示赞赏。

 class FormInput extends Component {
  constructor(props) {
    super(props);
    this.state = { budget: 0, items: [] };
  }

  handleSubmit = (event) => {
    event.preventDefault();
    const item = [
      { name: event.target.itemName.value, price: event.target.itemCost.value },
    ];
    const budget = { budget: event.target.budget.value };
    this.setState({ budget, items: [...this.state.items, ...item] });

  };

 const Cost = (props) => {
  const test = props.item.map((ite, index) => (
    <li key={index}> {ite.item} </li>
  ));
  return (
    <div>
      <Container
        style={{
          alignitems: "center",
          textAlign: "left",
          fontWeight: "bold",
          color: "black",
        }}
      >
        <Card>
          <Card.Body>
            {" "}
            <ul> {test} </ul>{" "}
          </Card.Body>
        </Card>
      </Container>
    </div>
  );
};

标签： reactjsreact-native

解决方案

使用该map函数时，会直接返回您的 item 对象，无需添加.item：

const test = props.item.map((item, index) => (
   <li key={index}> {item.name} - {item.price} </li>
));

您的数组对象没有item属性。

推荐阅读