Question

刚刚在React开始了。道具似乎是可以访问的。似乎不喜欢＆＃34;这个＆＃34;在Inventory.js中。我做错了什么？

App.js

$listing = str_replace( ", ", ",", $model );

$modle_arrs = explode(',', $listing);
$compt_val_all = [];
foreach($modle_arrs as $modle_arr){

    $e_compts = EbayCompatrbilityCategorie::all()->where('model', $modle_arr);

    $compt_val = "{";
        foreach ($e_compts as $e_compt) {
            $compt_val .= "[" . $e_compt['year'] . "]";
            $compt_val .= "[" . $e_compt['model'] . "]";

            echo "[" . $e_compt['year'] . "]";
            echo "[" . $e_compt['model'] . "]";
        }
    $compt_val .= "}";
    $compt_val_all[] = $compt_val;
}

dd($compt_val_all);

Inventory.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Inventory from './Inventory';
import ChangeForm from './ChangeForm';

class App extends Component {
  constructor() {
    super();

    this.addEntryToState = this.addEntryToState.bind(this);

    this.state = {
      entries: {},
    };
  }

  addEntryToState(entry) {
    const entries = {...this.state.entries};
    const timestamp = Date.now();
    entries[`entry-${timestamp}`] = entry;
    this.setState({ entries: entries })
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <ChangeForm addEntryToState={this.addEntryToState} entries={this.state.entries} />
        <Inventory entries={this.state.entries} />
        <p></p>
      </div>
    );
  }
}

export default App;

ChangeForm.js

import React from 'react';

class Inventory extends React.Component {

  render() {
    return (

      <div>
        <h2>Inventory</h2>
        <p>{this.props.entries[0].name</p>
        <p>{this.props.entries <-----*********** how to display? ****}</p>
        <p>table removed because errors</p>

      </div>
    )
  }
}

export default Inventory;

错误讯息：

TypeError：无法读取属性＆＃39; name＆＃39;未定义的Inventory.render SRC / Inventory.js：11

import React from 'react';

class ChangeForm extends React.Component {
  createEntry(event) {
    event.preventDefault();
    const entry = {
      name: this.name.value,
      quantity: this.quantity.value,
      size: this.size.value,
    }
    this.props.addEntryToState(entry);
    this.changeForm.reset();

  }

  render() {
    return (
      <div>
        <h2>Change Form</h2>
        <form ref={(input) => this.changeForm = input} onSubmit={(e) => this.createEntry(e)}>
          <input ref={(input) => this.name = input} type="text" placeholder="name" />
          <input ref={(input) => this.quantity = input} type="text" placeholder="quantity" />
          <input ref={(input) => this.size = input} type="text" placeholder="size" />
          <button type="submit">Submit</button>
        </form>

      </div>
    )
  }
}

export default ChangeForm;

查看已编译的▶26个堆栈框架已折叠。对象../ SRC / index.js SRC / index.js：7

   8 | 
   9 | <div>
  10 |   <h2>Inventory</h2>
> 11 |   <p>{this.props.entries[0].name}</p>
  12 |   <p>table removed because errors</p>
  13 | 
  14 | </div>

Answer 1

您收到错误是因为entries prop被设置为对象，而不是数组。参见

this.state = {
  entries: {},
};

App.js中的

条目是一个对象，而不是数组。您需要修改代码以使entries成为数组。

例如：

this.state = {
  entries: [],
};

在React中访问道具：无法读取未定义的属性***

1 个答案: