对象作为 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"}

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

Answer 1

如您所见，您的响应是一个对象数组。例如，您必须通过该数组循环抛出以正确显示数据。

    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 个对象），并且每个（项目）都有您要显示的属性。