Question

我对REACT非常新，但是给我一些挑战，我试图创建一个迷你应用程序，你可以在其中介绍朋友的名字以填充数组。到目前为止，我的代码工作得非常好。

import React, { Component } from 'react';

class App extends Component {

  constructor() {
    super();
    this.state = {
      value: '',
      friends: []
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    this.setState({
      friends: this.state.friends.concat(this.state.value)
    });
    event.preventDefault();
  }

  render() {

    let friendsList = this.state.friends;
    const Friends = friendsList.map((friend, index) => 
      <li key={index}>
        <span>{friend}</span>
      </li>
    )

    return (
      <div className="App">
        <div className="header">

          <form onSubmit={this.handleSubmit}>
            <label>
              <input type="text" value={this.state.value} onChange={this.handleChange} placeholder="Enter the name of your friend"/>
            </label>
            <input type="submit" value="Submit" />
          </form>

          <div className="content">
            <ul> {Friends} </ul>
          </div>
        </div>

      </div>
    );
  }
}

export default App;

问题：

现在我不需要添加任何名称的字符串，我需要添加一个具有名称，年龄和生日等属性的对象。但是，React告诉我：

对象无效作为React子对象（找到：带键的对象） {名称}）

当我尝试这样做时：

this.setState({
  friends: this.state.friends.concat({"name": "xxx"})
});

我没有任何运气就检查了另一个类似的问题，即使是教程，似乎也不是这一点。有什么想法吗？

Answer 1

也许它可以解决你的问题。

const Friends = friendsList.map((friend, index) => 
  <li key={index}>
    <span>{friend.name}</span>
  </li>
)

此外，您无需将文本包装在范围内。

const Friends = friendsList.map((friend, index) => 
  <li key={index}>{friend.name}</li>
)

Answer 2

问题不在于setState - React无法渲染objects。您必须更改呈现Friend的方式，例如：

const Friends = friendsList.map((friend, index) => 
  <li key={index}>
    <span>{friend.name} - {friend.age}</span>
  </li>
)

它应该工作 - 请记住，React默认只能呈现字符串，数字和其他组件。对于其他数据类型，您必须提供渲染功能。

React：将对象添加到数组中

2 个答案: