Не понимаю, почему я получаю TypeError: Невозможно прочитать свойство '_id' из неопределенного в React

Question

Я пытаюсь выяснить, почему мой код не работает, но я все еще не понимаю, почему я получаю эту ошибку типа.

import React, { Component } from 'react';
import axios from 'axios'

Список классов расширяет Компонент { состояние = { заглавие: '', описание: '' }

  componentDidMount(){
    const initialState = {
      _id: this.props.list._id,
      title: this.props.list.title,
      description: this.props.list.description
    }

    this.setState(initialState)
  }

  handleChange = (event) => {
    const { value, name } = event.target
    this.setState({[name]: value})
  }


  handleDelete = () => {
    axios.delete(`/api/lists/${this.state._id}`).then(() => {
      this.props.getAllLists()
    })
  }

  handleUpdate = () => {
    axios.patch(`/api/lists/${this.state._id}`, this.state).then(() => {
      console.log("Updated List")  
    })  
  }

  render() {
    return (
      <div>
        <input onBlur={this.handleUpdate}
          onChange={this.handleChange}
          type="text" name="title"
          value={this.state.title}
        />
        <textarea onBlur={this.handleUpdate}
          onChange={this.handleChange}
          name="description" value={this.state.description}
        />
        <button onClick={this.handleDelete}>X</button>
        </div>
    )
  }
}

export default List

Это сообщение об ошибке по этой ссылке

Добавлена ​​другая часть

    import React, { Component } from 'react';
import axios from 'axios'
import List from './List';

class ListPage extends Component {
    state = {
        user: {},
        lists: []
      }

      componentDidMount() {
        this.getAllLists()
      }

      getAllLists = () => {
        // make an api call to get one single user
        // On the server URL is '/api/users/:userId'
        const userId = this.props.match.params.userId
        axios.get(`/api/users/${userId}`).then(res => {
          this.setState({
            user: res.data,
            lists: res.data.lists
          })
        })
      }

      handleCreateNewList = () => {
        const userId = this.props.match.params.userId
        const payload = {
          title: 'List Title',
          description: 'List Description'
        }
        axios.post(`/api/users/${userId}/lists`, payload).then(res => {
          const newList = res.data
          const newStateLists = [...this.state.lists, newList]
          this.setState({ lists: newStateLists })
        })
      }

      render() {
        return (
          <div>
            <h1>{this.state.user.username}'s List Page</h1>
             onClick={this.handleCreateNewList}
              New Idea


              {this.state.lists.map(list => (
                <List getAllLists={this.getAllLists} key={list._id} list={list}/>
              ))}

          </div>
        )
      }
    }

export default ListPage;

Answer 1

Я думаю, что вы должны сначала проверить, пусто ли this.state.lists или нет, прежде чем пропустить реквизит.

Answer 2

Извините, я пока не могу комментировать. Ошибка заключается в том, что компоненту не передается реквизит list. Используете ли вы компонент, как это:

<List list={{_id: 'someId', title: 'someTitle', description: 'someDesc'}} />

Кроме того, почему вы перезаписываете состояние, когда компонент монтируется вместо установки начального состояния?