Question

我的主要组件叫做App。

length拉入App组件，如此

Table

播放器最初在app组件状态中定义为空数组。

但在我的<Table players={players} />组件中我执行此操作：

Table

为什么我会得到未定义的？

我也在我的App组件中有这个：

console.log(this.props.players, 'players');

Answer 1

关于我在你的问题中的评论，你需要做这样的事情：

<Table
  players={this.state.players}
/>

通过这种方式，您可以从州内获得玩家。没有＆＃34; this.state＆＃34;你会收到和未定义的错误

Answer 2

您应该像这样24.16引用object / array

state

或者你可以这样使用Destructuring assignment of ES6：

this.props.state.players`

示例：

＆＃13;

 const { players } = this.state;

＆＃13;

const Table = ({ players }) => {
  return (
    <table>
      <thead>
        <th>Name</th>
      </thead>
      <tbody>
        {
          players.map(player => {
            return (
              <tr>
                <td>
                  {player}
                </td>
              </tr>
            )
          })
        }
      </tbody>
    </table>
  );
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      players: ['john', 'alex', 'chris', 'dan']
    };
  }

  render() {
    const { players } = this.state;
    return (
      <div>
        <Table players={players} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

＆＃13;

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

＆＃13;

修改
作为更新问题的后续内容，这实际上取决于您设置<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>组件的方式。

如果它是无状态组件，您应该能够访问玩家直接不使用Table。

如果它是this.props.players组件，那么它应该按预期工作但是也许你有其他一些代码可能导致这种行为。

您没有分享足够的代码让我们知道。

在React中将状态作为道具传递下去

2 个答案: