Question

我现在遇到一个问题，试图使用react渲染列表，我将反应元素保存到状态，但我遇到的问题是控制台输出这样：

未捕获错误：对象无效作为React子对象（找到：具有键{}的对象）。如果您要渲染子集合，请改用数组。

以下是导致错误的状态：

＆＃13;

export default class UserData extends Component {
  constructor() {
    super();
    this.state = {
      resultsItems: {}
    }
  };

  componentDidMount() {

    fetch(url)
      .then(results => {
        return results.json();
      }).then(data => {
        console.log(data.items);
        let items = data.items.map((item) => {
          console.log(item.title);
          return (
            <li>
              <h2>item.title</h2>
            </li>
          )
        });

        this.setState({resultsItems: items});
        console.log("state", this.state.resultsItems);
      })
      .catch(error => console.log(error))
  };

  render() {
    return (
      <div>
        <button onClick={() => this.props.updateLoginStatus(false)}>
          Logout
        </button>
        <div>
          ID: {this.props.user}
          {this.state.resultsItems}
        </div>
      </div>
    )
  }
}

＆＃13;

Answer 1

通过展示Hamms在评论中讨论的事情：

class UserData extends Component {
  constructor () {
    super()
    this.state = {
      resultsItems: []
    }
  }

  componentDidMount () {
    // Simulate API response
    const resultsItems = [
      { title: 'foo' },
      { title: 'bar' },
      { title: 'wombat' }
    ]
    this.setState({ resultsItems })
  }

  render () {
    return (
      <div>
        {this.state.resultsItems.map(item => <ResultsItem item={item} />)}
      </div>
    )
  }
}

function ResultsItem ({ item }) {
  return <li>{item.title}</li>
}

但是，Chris'对于错误消息的原因是正确的答案：第一个渲染尝试使用空对象而不是数组，但是失败。

Answer 2

您似乎正在componentDidMount上正确设置数组到您的状态，但构造函数中的初始状态是一个对象而不是数组！

所以改变这个：

this.state = {
  resultsItems: {}
}

到此：

this.state = {
  resultsItems: []
}

React状态是反应元素

2 个答案: