对象作为 React 子对象无效（已找到：带键的对象）。如果您打算呈现子集合，请改用数组

Question

constructor(props) {
        super(props);
        this.state = {
            message: []
        };
    }

    async getData() {
        await axios.get("https:...")
        .then((response) => {
            console.log((response));
            console.log(typeof(response)); // object
            const convertString = JSON.parse(response.data.body);
            this.setState({message: convertString});
            console.log(convertString));
        })
    }

    componentDidMount() {
        this.getData();
    }

    render() {
        const obj = (this.state.message);
        console.log(obj);
        return(
            <div>
                {this.state.message}
            </div>
        )

我收到错误：“错误：对象作为 React 子项无效（找到：具有键 {Items, Count, ScannedCount} 的对象）。如果您打算呈现子项集合，请改用数组."

console.log(convertString) 给我这个：

Items: Array(4)
0: {key1: "value", key2: "value"}
1: {key1: "value", key2: "value"}
2: {key1: "value", key2: "value"}
3: {key1: "value", key2: "value"}

如果我想以 table 格式呈现数组，我应该如何通过 this.setState() 传递数据？

Answer 1

如您所见，您的响应是一个 objects.You 数组，必须通过此数组循环抛出以显示当前数据，例如：

render() {
  return(
    <div>
        {this.state.message.map((item,i) => (
          <div key={i}> 
            <div>{item.key1}</div>
            <div>{item.key2}</div>
          </div>
        )}
    </div>
  )
}

在 {this.state.message.map} 方法中循环抛出消息数组（包含 4 个对象} 并且每个（项目）都具有您要显示的属性。

对象作为 React 子对象无效（已找到：带键的对象）。如果您打算呈现子集合，请改用数组

Objects are not valid as a React child (found: object with keys). If you meant to render a collection of children, use an array instead

arrays

reactjs

object

children