Question

我是React的新手，正在尝试解决以下问题：

以下代码出现错误。我基本上想从表中删除行。我正在获取json格式的数据，并将其转换为列表形式。表格行每行都有删除按钮，我正在尝试编写代码以删除单个项目：

import React, { Component } from 'react'
import {render} from 'react-dom';

let PRODUCTS = [
    {id: 1, category: 'Music', price: '$459.99', name: 'Clarinet'},
    {id: 2, category: 'Music', price: '$5,000', name: 'Cello'},
    {id: 3, category: 'Music', price: '$4,500', name: 'Tuba'},
    {id: 4, category: 'Furniture', price: '$799', name: 'Chaise Lounge'},
    {id: 5, category: 'Furniture', price: '$1,300', name: 'Dining Table'},
    {id: 6, category: 'Furniture', price: '$100', name: 'Bean Bag'}
];

const ProductTable = (props) => {

    return (
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Price</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {props.product.map()(
                    (row, i) => (
                        <tr>
                            <td>{row.name}</td>
                            <td>{row.price}</td>
                            <td><button onClick={props.delEvent}>X</button></td>
                        </tr>
                    )
                )}   
            </tbody>
        </table>
    )}

class Store extends Component {
    constructor(props) {
        super(props)
        this.state = {
          name: '',
          cat: '',
          price: '',
          search: ''
        }
      }
    newName = e =>  this.setState({name: e.target.value})
    newCategory = e => this.setState({cat: e.target.value})
    newPrice = e => this.setState({price: e.target.value})
    submit = e => {
        console.log('New Name: ' + this.state.name)
        console.log('New Cat: ' + this.state.cat)
        console.log('New price: ' + this.state.price)
        e.preventDefault()
    }

    updateSearch(event){
        this.setState({search: event.target.value})
    }

    deleteProduct = (index,e) => {
        console.log(index)
        const productNames = Object.assign([], this.state.products)
        productNames.splice(index, 1)
        this.setState({productNames:productNames})
    }
    render () {
        let filteredProducts = this.props.products.filter(
            (product) => {
                return product.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1
            }
        )

        //const {products} = this.props

            return(
                <div>
                    <form>
                        <input type='text' value={this.state.search} placeholder='Search...' onChange={this.updateSearch.bind(this)}/>
                    </form><br />

                    <ProductTable product = {filteredProducts}
                                  delEvent={this.deleteProduct.bind(this)}/> <br />


                        <form onSubmit={this.submit}>
                            <label>Name: <br />
                                <input type='text' onChange={this.newName} /><br /><br />
                            </label><br />

                            <label>Category: <br />
                                <input type='text' name='cat'  onChange={this.newCategory} />
                            <br /><br />
                            </label><br />

                            <label>Price: <br />
                                <input type='text' name='price'  onChange={this.newPrice} /><br /><br />
                            </label><br />

                            <button>Submit</button>
                    </form>
                </div>
            )}}


render(
    <Store products={PRODUCTS}/>,
    document.getElementById('root'));

我收到以下错误：

     ×
TypeError: undefined is not a function
ProductTable
C:/Users/Customers/src/index.js:24
  21 |         <th></th>
  22 |     </tr>
  23 | </thead>
> 24 | <tbody>
     | ^  25 |     {props.product.map()(
  26 |         (row, i) => (
  27 |             <tr>

Answer 1

问题出在第25行的语法错误上。

您有.map()(，这是不正确的。尝试用以下代码替换大块的代码：

{props.product.map((row, i) => (
  <tr>
    <td>{row.name}</td>
    <td>{row.price}</td>
    <td><button onClick={props.delEvent}>X</button></td>
  </tr>  
))}

参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Answer 2

我猜组件道具不在组件类之外的范围内吗？您可以通过将其移动到组件内部来进行测试，例如构造函数：

ProductTable =（props）=>

也许HTML标记与组件内部的标记不能相同？

为什么我得到-TypeError：undefined不是函数错误？

2 个答案: