React：映射数据

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>

  )};

}