Question

当我们尝试打印数组时，它们如何处理数组？

class App extends Component {
        constructor() {
          this.state = { 
            myarr: [1, 2, 3, 4, 5] 
          };
        }
        render(){
          return <div>{this.state.myarr}</div> 
          // it prints 12345.... I am able to understand why???
        } 
        }
    }

Answer 1

看起来您只想将数组显示为array。

您可以使用JSON.stringify(array)。喜欢

class App extends React.Component {
  render() {
    const data = [1, 2, 3, 4, 5];

    return <div>{JSON.stringify(data)}</div>;
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='root'/>

为什么您的代码会打印12345，因为您正在这样做。 {..}表达式中的所有内容都会显示其值

Answer 2

当您尝试打印数组时，最好使用.map（）函数。

在使用地图时，请确保为每个项目赋予唯一的“索引”值。按键可帮助React识别哪些项目已更改，添加或删除。

    render() {
        return (
        <div>
          {this.state.myarr.map((number) => (
            <li key={number.toString()}>
              {number}
            </li>
            ))}
        </div>);
    }

它真的可以帮助在学习做出反应之前学习ES6类方法，然后阅读官方文档。您甚至不必使阵列保持状态。

This link可以帮助您更好地理解。

数组在react js中打印为字符串

2 个答案: