Question

在控制台中，每次单击我都可以看到数组中的对象。

但是我无法显示

我尝试了map（）而不是forEach，它只显示一次。

每次单击按钮时都需要显示它

有人可以告诉我我在做什么错吗？

import React, { Component } from 'react'

export default class App extends Component {
  state = {
    isClicked : false
  }

  handleClick = () => {
    this.setState({
      isClicked : true
    }) 
  }

  render() {
    let myarray = [ ]

    let myobject = {
      color: 'blue',
      shape: 'round'
    }

    myarray.push(myobject)

    let looped = myarray.forEach((data) => <><h1>{data.color}</h1> <h1>{data.shape}</h1></>)

    console.log(myarray)
   return (
      <div>
        <button onClick={this.handleClick}>Submit</button>
        { this.state.isClicked ? looped : null}
      </div>
    )
  }
}

我希望对象在单击按钮时显示在页面上

Answer 1

您的代码段中存在一些问题：

forEach()没有返回值。
在handleClick上，您一次将状态更改为isClicked: true。

为了修正代码并在每次点击时显示数据，您应该：

使用map()将每个对象映射到React.Element。
更改每次单击按钮的状态，因此在您的情况下，每次单击时，都应颠倒this.state.isClicked的布尔值。

这是一个有效的示例：

import React from 'react';

const myArray = [
  {
    color: 'blue',
    shape: 'round'
  }
];

const looped = myArray.map((data, i) => (
  <div key={i}>
    <h1>{data.color}</h1> <h1>{data.shape}</h1>
  </div>
));

export default class App extends React.Component {
  state = {
    isClicked: false
  };

  handleClick = () => {
    this.setState(prevState => {
      console.log(prevState);
      return { isClicked: !prevState.isClicked };
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Submit</button>
        {this.state.isClicked && looped}
      </div>
    );
  }
}

Answer 2

问题的原因是，您使用Array.prototype.forEach()，该函数执行每个项目的功能，但是既不对数组进行突变也不返回新的数组。

改为使用Array.prototype.map()。它也不会变异数组，而是返回结果数组，其中包含由映射函数生成的项。

尝试一下

import React, { Component } from 'react'

export default class App extends Component {
  state = {
    isClicked : false
  }

  handleClick = () => {
    this.setState({
      isClicked : true
    }) 
  }

  render() {
    let myarray = [ ]

    let myobject = {
      color: 'blue',
      shape: 'round'
    }

    myarray.push(myobject)

    let looped = myarray.map((data) => <><h1>{data.color}</h1> <h1>{data.shape}</h1></>)

    console.log(myarray)
   return (
      <div>
        <button onClick={this.handleClick}>Submit</button>
        { this.state.isClicked ? looped : null}
      </div>
    )
  }
}

React JS：无法在onClick中显示数组数据

2 个答案: