未知的错误：对象无效作为一个react子女（找到：带键{key，libelle}的对象）：在fetch api上

Question

我尝试添加我的API并获取城镇的名称，以将其放在我的选择标签上。但是我无法理解错误并纠正它。

import React, {useState} from 'react';
import {Navigate} from 'react-router-dom'
import Entete from './MEP/entete'

function Localisation() {
  const [CP, setCP]= React.useState('');
  const [city, setCity]= React.useState('');
  const [ListVille, setList]= React.useState([]);
  const [goToExploit, setGoToExploit] = useState(false)

  function handleSubmit(event) {
    event.preventDefault()
    setGoToExploit(true)
  }

  if(goToExploit) {
      return <Navigate push to={`/exploitation`} />
  }

  function handleChange(event) {
    const CP = event.target.value
    setCP(CP)
    fetch('http://localhost:3000/api/1.0/getCommunes/' + CP ).then(function(response) {
        return response.json()
      }).then(function(response){
        setList(response)
        console.log(response)
      })
      console.log(ListVille)
 }

  return (
    <div>
      <Entete titre="Localisation"/>

      <form onSubmit={handleSubmit}>
        <div className='titre'> Saisissez votre code postal </div>
        <input 
        className='input'
        value={CP}
        onChange={handleChange}
        placeholder='Code Postal'
        type='text'
        required/>
        <div className='titre'> Saisissez votre ville {ListVille}</div>
        <select >
          <option value="">Choisissez</option>
          { Array.isArray(ListVille) ? ListVille.map((item)=>( <option value={item.key} > {item.libelle} </option> ) ) : ListVille===undefined ?  <option value={'pas de ville'}>  </option>  : <option value={ListVille.key}> {ListVille.libelle} </option> }
        </select>
        <div className='centrer'>
          <button type='submit' className='validation'> Valider </button>
        </div>
      </form>
    </div>
  );
}

export default Localisation;

当CP不是API的值时，SELECT仅渲染“ Choisissez”，否则将

在我输入良好CP的第一个Console.log（wendesp）渲染时渲染该镇的列表：

(13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {key: '41026', libelle: 'Brévainville'}
1: {key: '41028', libelle: 'Busloup'}
2: {key: '41073', libelle: 'Danzé'}
3: {key: '41095', libelle: 'Fréteval'}
4: {key: '41115', libelle: 'Lignières'}
5: {key: '41141', libelle: 'Moisy'}
6: {key: '41154', libelle: 'Morée'}
7: {key: '41172', libelle: 'Ouzouer-le-Doyen'}
8: {key: '41173', libelle: 'Beauce la Romaine'}
9: {key: '41186', libelle: 'Rahart'}
10: {key: '41214', libelle: 'Saint-Hilaire-la-Gravelle'}
11: {key: '41216', libelle: 'Saint-Jean-Froidmentel'}
12: {key: '41275', libelle: 'La Ville-aux-Clercs'}
length: 13
[[Prototype]]: Array(0)

和第二个Console.log（Listville）（Listville）渲染[]

所有带有错误消息的全部：

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

我尝试过：

• 将获取函数放在使用效果中，但它也不起作用
• 。 ＆lt; option key = {item.key} value = {item.key}＆gt; {item.libelle}＆lt;/option＆gt;

有人可以帮助我或引导我做某事吗？

编辑似乎来自Listville Const，因为当我在Mys Render ＆lt; div className ='pragraphe'＆gt中尝试时，测试{cp ==='41160'？ Listville [0] .Key：'coucou'}＆lt;/div＆gt;我已经git错误消息：

Uncaught TypeError: Cannot read properties of undefined (reading 'key')

编辑2 问题似乎来自于setList（wendesp）没有在Listville设置数据，但我无法弄清楚为什么

编辑3 setList（wendesp）确实在Listville设置了数据，但是它的异步是为了设置数据

Answer 1

在您的代码中，我注意到以下行，我认为这会提供错误：

<div className='titre'> Saisissez votre ville {ListVille}</div>

Answer 2

经过大量的研究，我发现了问题所在，我在此处提出了一个更精确的问题，其他反应问题
问题解决了。
谢谢大家