This.props 返回未定義？

Question

我目前正在通過 props 將數據傳遞到我的組件中，但出於某種原因，它顯示為未定義。 從我的父組件的角度來看，我有以下 pass 2 props, data和header 。

class ContractTable extends Component {
constructor(props) {
    super(props);
    this.state = {
        data: []
    };
}

render() {
    return (
        <div>
            <p></p>
            <MuiThemeProvider>
                <TableTest
                    data={this.state.data}
                    header={[
                        {
                            name: "First Name",
                            prop: "firstName"
                        },
                        {
                            name: "Last Name",
                            prop: "lastName"
                        },
                        {
                            name: "Age",
                            prop: "age"
                        },
                        {
                            name: "Height",
                            prop: "height"
                        },
                        {
                            name: "Address",
                            prop: "address"
                        }
                    ]}
                />
            </MuiThemeProvider>
            <p></p>
        </div>
    );
}

我嘗試獲取道具並將其設置為我的狀態，但是當我記錄this.props.data或this.props.header它返回未定義。 為什么是這樣？

import React, { Component } from 'react';
import {
Table,
TableBody,
TableHeader,
TableHeaderColumn,
TableRow,
TableRowColumn,
} from 'material-ui/Table';

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

    this.state = {
        data: props.data,
        header: props.header
    }

    this.row = this.row.bind(this);
}

row = (currentValue, index, header) => (
    <TableRow key={`t-${index}`}>
        {
            header.map((headerName, index) => (
                <TableRowColumn key={`trc-${index}`}>
                    {currentValue[headerName.prop]}
                </TableRowColumn>
            ))
        }
    </TableRow>
);

render() {
    return 'hello'
}
}

export default TableTest;

Answer 1

更新：看看https://jsfiddle.net/nroLmghv/

只是呈現簡單的表頭。

將 props 傳遞給 state 不是一個好方法。

---

我創建了一個片段。 它看起來有效。 點哪個地方有問題。 或者提供MuiThemeProvider和TableTest完整代碼。

 class Example extends React.Component { constructor(props) { super(props) this.state = { // mock value data: "some value" } } render() { return <div> <TableTest data={this.state.data} header={[ { name: "First Name", prop: "firstName" }, { name: "Last Name", prop: "lastName" }, { name: "Age", prop: "age" }, { name: "Height", prop: "height" }, { name: "Address", prop: "address" } ]} /> </div>; } } class TableTest extends React.Component { constructor(props) { super(props); this.state = { data: this.props.data, header: this.props.header } console.log(this.state.data) console.log(this.state.header) } render() { return <div></div>; } } ReactDOM.render( <Example />, document.getElementById('root') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"> </div>

Answer 2

它是一種設置可直接從 props 派生的狀態的反模式，您寧願直接使用 props。 此外，如果您使用道具設置狀態並且需要根據道具更改更新狀態，則還需要實現componentWillReceiveProps功能