首页 文章

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

提问于
浏览 次
0

我想出了为什么国家不希望这样做 . 当我点击 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} 
                />
        )
    }
}

Edit组件将名称，描述和路由传递给此Form组件：

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 组件 .

我究竟做错了什么？

javascript reactjs react-router state

2 回答

  • 0

    当您的编辑组件第一次加载时，它没有 kitten . 因此错误 .

    你需要做的就是创造一只 empty 小猫 . 在您的编辑组件中...

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

    这将在您的组件的第一个装载/渲染时将小猫的名称设置为空字符串 .

    回复于
  • 0

    两件事情，

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

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

    第二：在 setState 函数之后你有 console.log(this.state.kitten.name) . 但是 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} 
                />
        )
    }
}
    回复于

相关问题