Переменная состояния, возвращаемая после использования хука реакции useState, показывает, что .map не является функцией - PullRequest
Новая
       46

Переменная состояния, возвращаемая после использования хука реакции useState, показывает, что .map не является функцией

2 голосов
/ 30 мая 2020

Этот код выдает ошибку, когда я пытаюсь отобразить переменную состояния, возвращаемую после вызова ловушки useEffect. На консоли, когда я печатаю myAppointment, он показывает два значения: одно пустое ([]) и другое (Array [25]). Я хочу извлечь значения petname из этого массива. Но появляется сообщение об ошибке «карта не является функцией». Пожалуйста, изучите это и помогите мне! 

function App() {
  const [myAppointment, setmyAppointment] = useState([])
  useEffect(() => {
      fetch('./data.json')
      .then(response=> response.json())
      .then(result=>{
        const apts=result.map(item=>{
          return item
        })
        setmyAppointment(state=>({...state,
          myAppointment:apts
        }))
      })**strong text**
  },[])

  console.log(myAppointment)
  const listItem = myAppointment.map((item)=>{
    return(
      <div>{item.petName}</div>
    )
  })

  return (
    <main className="page bg-white" id="petratings">
    <div className="container">
      <div className="row">
        <div className="col-md-12 bg-white">
          <div className="container">
            {/* {listItem} */}
            <div><AddAppointment /></div>
            <div><SearchAppointment /></div>
            <div><ListAppointment /></div>
          </div>
        </div>
      </div>
    </div>
  </main>
  );
}

Ответы [ 2 ]

1 голос
/ 30 мая 2020

Проблема заключается в том, как вы устанавливаете свое состояние после получения данных.

Вы устанавливаете состояние как объект, а не массив.

Давайте возьмем взгляните на строку, в которой вы устанавливаете состояние. 

setmyAppointment(state=>({...state,
          myAppointment:apts
        }))

Использование оператора распространения с фигурными скобками сообщает JavaScript компилятору о необходимости расширения объекта, и, очевидно, это не то, что вам нужно.

Вам следует вместо фигурных скобок использовать квадратные скобки. Это сообщит компилятору, что вы хотите распространить массив.

Так должно получиться что-то вроде этого. 


setmyAppointment(state=>([...state
        ]))

И на вашем месте я бы сделал это немного по-другому. Я установлю такое состояние 

setmyAppointment(apt)

Надеюсь, это поможет

1 голос
/ 30 мая 2020

У вас есть состояние в виде массива. Однако, когда вы пытаетесь обновить его, вы конвертируете его в объект с ключом myAppointment, который является причиной вашей ошибки.

Вы должны обновить свое состояние, например, 

  setmyAppointment(state=> [...state, ...apts]);

Однако, поскольку состояние изначально пусто, и вы обновляете его только один раз в useEffect при initialLoad, вы также можете обновить его, например, 

 setmyAppointment(apts);
...