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

This is the Error msg at this link

添加了另一部分

    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

对不起，我无法发表评论。该错误是因为没有“列表”属性被传递给组件。您是否正在使用这样的组件：

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

此外，为什么在安装组件时覆盖状态而不是设置初始状态？

Answer 2

我认为您应该在传递道具之前先检查“ this.state.lists”是否为空。

不明白为什么我收到TypeError：无法读取React中未定义的属性'_id'

2 个答案: