时间戳

首页 > 解决方案 > 我尝试使用反应组件之间的道具解析我的数据，但我得到未定义的值

javascript - 我尝试使用反应组件之间的道具解析我的数据，但我得到未定义的值

问题描述

我是新来的反应，所以我得到的任何帮助我都很感激。我想将数据从我的 RobotForm 组件传递到我的 RobotList 组件，但是当我使用上一次对 RobotList.test.js 测试的值对其进行测试时，我得到未定义的数据。我应该怎么办？

该测试引入了一些数据，预计会得到一个具有正确值的机器人。

错误：

● correct robot

    expect(received).toEqual(expected)

    Expected value to equal:
      {"id": 3, "mass": "test_mass", "name": "test_name", "type": "test_type"}
    Received:
      {"id": 3, "mass": undefined, "name": undefined, "type": undefined}

    Difference:

    - Expected
    + Received

      Object {
        "id": 3,
    -   "mass": "test_mass",
    -   "name": "test_name",
    -   "type": "test_type",
    +   "mass": undefined,
    +   "name": undefined,
    +   "type": undefined,
      }

      49 |      button.simulate('click')
      50 |      let robot = component.find(Robot).last()
    > 51 |      expect(robot.props().item).toEqual({id: 3, name : 'test_name', type : 'test_type', mass: 'test_mass'})
         |                                 ^
      52 | })

RobotForm.js

class RobotForm extends Component{

    render() {
        return (
            <div>
                <label htmlFor="name">Name</label>
                <input type="name" id="name" name="name" onChange={this.handleChange} />                
                <label htmlFor="type">Type</label>
                <input type="text" id="type" name="type" onChange={this.handleChange} />
                <label htmlFor="mass">Mass</label>
                <input type="text" id="mass" name="mass" onChange={this.handleChange} />
                <button type="submit" value="add" onClick={this.addRobotel}>Add Robot</button>
            </div>
        )
    }

    addRobotel = () =>{

        let robot ={
            name : this.props.name,
            type : this.props.type,
            mass : this.props.mass
        };
         this.props.onAdd(robot);
    }
    
}

export default RobotForm

机器人列表.js

class RobotList extends Component {
    constructor(){
        super()
        this.state = {
            robots : []
        }

        this.addRobotel = (r) => {
            this.store.addRobot(r);
        }
    }
    componentDidMount(){
        this.store = new RobotStore()
        this.setState({
            robots : this.store.getRobots()
        })
        this.store.emitter.addListener('UPDATE', () => {
            this.setState({
                robots : this.store.getRobots()
            })          
        })
    }

    render() {
        return (

            <div>
                {
                    this.state.robots.map((e, i) => 
                        <Robot item={e} key={i} />
                    )
                }

                <RobotForm onAdd={this.addRobotel} />
            </div>
        )
    }
}
export default RobotList

标签： javascriptreactjs

解决方案

您忘记将道具传递给RobotFormRobotList.js ：

render() {
    return (

        <div>
            {
                this.state.robots.map((e, i) => 
                    <Robot item={e} key={i} />
                )
            }

            <RobotForm 
            name="test_name" 
            type="test_type" 
            mass="test_mass" 
            onAdd={this.addRobotel} />
        </div>
    )
}

从输入而不是道具获取机器人值：

RobotForm.js

class RobotForm extends Component{
    constructor(props) {
        super(props);

        this.name = this.props.name;
        this.type = this.props.type;
        this.mass = this.props.value;
    }

    render() {
        return (
            <div>
                <label htmlFor="name">Name</label>
                <input type="name" id="name" name="name" defaultValue={this.props.name} onChange={(event) => this.name = event.target.value} />                
                <label htmlFor="type">Type</label>
                <input type="text" id="type" name="type" defaultValue={this.props.type} onChange={(event) => this.type = event.target.value} />
                <label htmlFor="mass">Mass</label>
                <input type="text" id="mass" name="mass" defaultValue={this.props.mass} onChange={(event) => this.mass = event.target.value} />
                <button type="submit" value="add" onClick={this.addRobotel}>Add Robot</button>
            </div>
        )
    }

    addRobotel = () =>{

        let robot ={
            name : this.name,
            type : this.type,
            mass : this.mass
        };
         this.props.onAdd(robot);
    }
    
}

我只是将 props 用作默认值，如果需要，您可以将其删除。

推荐阅读