Question

我正在尝试映射数组中的数据，但是在运行代码时未映射数据。如果我记录数据（序列变量），它将记录我要映射的变量（下面的屏幕截图）。有人对为何未映射数据有任何建议吗？

numberList() {
  const uid = this.state.user.uid;
    const serialRef = db.ref(uid + "/serials");
    
    serialRef.on("value", (serial_numbers)=> {
      const serials = [];
      serial_numbers.forEach((serial_number)=> {
        serials.push({s:serial_number.val()});
      });
      console.log(serials);
  return (
    <div>
      {serials.map((number) => <Card>
      <Card.Body>{number.s.serial}</Card.Body> </Card>)}
    </div>
  );
    });

}
        render (){
        return (
          <button onClick={this.numberList}>Cards</button>
        )};

}

谢谢！

Answer 1

您没有从组件中渲染任何东西

在处理完数组后，理想情况下应将其设置为会导致组件重新呈现的状态，如果从如下所示的状态呈现序列，则在加载后会显示该序列。单击按钮后，数字列表功能将执行并设置数据状态，并将其映射并显示。

根据您当前的代码，您只需映射并返回未在任何地方使用的项目，因此应遵循以下模式。

class Serials extends Component {
  state = {
    serials: [],
  };
  numberList() {
    const uid = this.state.user.uid;
    const serialRef = db.ref(uid + '/serials');

    serialRef.on('value', (serial_numbers) => {
      const serials = [];
      serial_numbers.forEach((serial_number) => {
        serials.push({ s: serial_number.val() });
      });
      this.setState({ serials: serials });
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.numberList}>Cards</button>
        <div>
          {this.state.serials.map((number) => (
            <Card>
              <Card.Body>{number.s.serial}</Card.Body>
            </Card>
          ))}
        </div>
      </div>
    );
  }
}

Answer 2

serials应该是组件状态的一部分，由单击处理程序更新，并映射到render方法中。

state = {
  serials: [],
};

...

numberList() {
  const { user: { uid } } = this.state;
  const serialRef = db.ref(uid + "/serials");

  serialRef.on("value", (serial_numbers)=> {
    this.setState({
      serials: serial_numbers.map(s => ({ s: s.val() })),
    });
  });
}

...

render () {
  const { serials } = this.state;

  return (
    <div>
      <button onClick={this.numberList}>Cards</button>
      <div>
        {serials.map((number) => (
          <Card>
           <Card.Body>{number.s.serial}</Card.Body>
          </Card>
        ))}
      </div>
    </div>
  )};
}

反应：映射数据

2 个答案: