Question

我正在尝试使用React和React路由器构建一个示例CRUD应用程序，我无法弄清楚为什么状态不像我期望的那样传递给子组件。当我点击edit路线时，它会渲染Edit组件，该组件从数据库中抓取我想要的小猫并将其信息发送到Form组件，该组件既可用于编辑现有小猫，也可用于添加新的一个。

这是编辑组件：

import React, { Component } from 'react';
import axios from 'axios';
import { match } from 'react-router-dom';
import Form from './Form';


export default class Edit extends Component {
    constructor(props) {
        super(props)

        this.state = {}
    }

    componentDidMount() {
        axios.get(`/updateKitten/${this.props.match.params.id}`)
        .then(res => {
            const kitten = res.data
            this.setState({ kitten })
            console.log(this.state.kitten.name)  //Sammy, or something
        })
        .catch(err => console.log(err))
    }

    render() {
        return (
                <Form 
                    name={this.state.kitten.name} // throws error or undefined
                    description={this.state.kitten.description} //throws error or undefined
                    route={this.props.match.params.id} 
                />
        )
    }
}

编辑组件将名称，描述和路由传递给此表单组件：

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

export default class Add extends Component {
  constructor(props) {
    super(props)

    this.state = { name: this.props.name, description: this.props.description}

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(e) {
    const name = e.target.name;
    const value = e.target.value;

    this.setState({
      [name]: value
    });
  }

  handleSubmit(e) {
    axios.post(`/addKitten/${this.props.route}`, this.state)
      .then(this.setState({ name: '', description: '' }))
    e.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>Name</label>
        <input type='text' name="name" value={this.state.name}
         onChange={this.handleChange}/>
        <label>Description</label>
        <input type='text' name="description" value={this.state.description}
          onChange={this.handleChange}/>
        <input type='submit' value='Submit' />
      </form>
    )
  }
}

我收到以下错误：

bundle.js:28950 Uncaught TypeError: Cannot read property 'name' of undefined

尝试将该信息作为道具发送到Form组件。

我做错了什么？

Answer 1

第一次加载“修改”组件时，它没有kitten。因此错误。

您需要做的是创建一只empty小猫。在您的编辑组件...

this.state = { kitten: {name:''} }

这会将小猫的名字设置为组件首次装载/渲染时的空字符串。

Answer 2

两件事，

首先：在编辑组件中，您尚未初始化小猫状态，而是根据API结果进行设置。但是，在调用组件之后调用componentDidMount，因此DOM已经呈现一次，并且第一次没有找到任何值this.state.kitten.name或this.state.kitten.description。

只有在API成功后才能设置小猫状态。因此，只需在渲染时进行检查。

第二：在console.log(this.state.kitten.name)功能之后你有setState。但是setState is asynchronous。看到这个问题：

Change state on click react js

因此您需要在setState回调中指定console.log

您的代码看起来像

export default class Edit extends Component {
    constructor(props) {
        super(props)

        this.state = {}
    }

    componentDidMount() {
        axios.get(`/updateKitten/${this.props.match.params.id}`)
        .then(res => {
            const kitten = res.data
            this.setState({ kitten }. function() {
                  console.log(this.state.kitten.name)  //Sammy, or something
            })

        })
        .catch(err => console.log(err))
    }

    render() {
        return (
                <Form 
                    name={this.state.kitten.name || '' } 
                    description={this.state.kitten.description || ''} 
                    route={this.props.match.params.id} 
                />
        )
    }
}

将状态传递给子组件作为道具不起作用

2 个答案: