Question

我正在尝试通过映射来渲染jsx，该数组已从我的数据库中检索并设置为本地状态。我得到的错误是

对象作为React子对象无效（找到：带键的对象{id，名称，显示顺序}）。如果您要渲染子集合，请使用数组代替。

请参阅下面的代码......

class TableList extends Component {
  constructor(){
     super()

  this.state = {
    allPeopleResults: [],
    searchName: '',
    searchedNameResults: []
  }
}

  componentDidMount = () => {
    axios.get('http://localhost:3003/api/getPeople').then(response => {
      console.log(response.data)
        this.setState({
            allPeopleResults: response.data
        })            
    })

}
<Card
 title={this.state.allPeopleResults}
 category="Here is a subtitle for this table"
 ctTableFullWidth
 ctTableResponsive
 content={
              <Table striped hover>                    
                <thead>                      
                  <tr>
                    { 
                      this.state.allPeopleResults.map((person, key) => {
                        return (
                          <div>
                            <th key={key}>{person.name}</th>
                          </div>
                          ); 
                      })
                    }  
                  </tr>
                </thead>
                <tbody>
                  {this.state.allPeopleResults.map((person, key) => {
                    return (                          
                      <td key={key}>{person.name}</td>
                      )

                    }) 
                  })}
                </tbody>  
              </Table>
            }
          />
        </Col>

我知道状态上的allPeopleResults属性正确地使用数组设置，因为componentDidMount中的console.log返回我想要的内容，因为它从我的数据库返回一个对象数组。我知道数组是对象，但我认为使用.map方法可以完成它需要做的事情。

有人可以帮忙吗？

Answer 1

您正尝试将一组vanilla Javascript对象渲染为您的标题：

"..."

使标题成为字符串或有效的反应元素（可以是React元素的数组，但不是vanilla对象）。

Answer 2

你确定你从数据库得到的是一个数组吗？

检查从数据库获取的原型中是否有数组映射函数，如果没有，它可能是索引对象？

看看这是否有帮助 Kros.Utils.MsAccess

“对象作为React子对象无效 - 使用数组” - 但它是一个数组？

2 个答案: