如何修復this.state。*。map不是函數？

Question

我想從組件中導出一行，但不知道問題出在哪里

import React, {Component} from 'react';

class TableRow extends Component {
state = {
    row: []
};

componentWillMount() {
    this.setState({row: this.props.children});
}

render() {
    return this.state.row.map((el,i) => {
        return (<tr>{el}</tr>)
    })
}
}

 export default TableRow;

this.state.row.map不是函數異常

Answer 1

問題可能出在您如何將行傳遞到組件上。 使用以下語法，您的組件將完美運行：

<TableRow>
    {['Am row', 'haha', 'yes', 'another row']}
</TableRow>

我還更改了componentWillMount ，它已棄用到componentDidMount 。

工作示例：

 class TableRow extends React.Component { state = { row: [] }; componentDidMount() { this.setState({ row: this.props.children }); } render() { return this.state.row.map((el, i) => <tr>{el}</tr>) } } const App = () => ( <TableRow> {['Am row', 'haha', 'yes', 'another row']} </TableRow> ) ReactDOM.render(<App />, document.getElementById('root')) 

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

但是，我看不到有任何理由使用有狀態組件，您可以直接從props中獲取值。

對於完全相同的行為，可以將TableRow簡化為一行：

const TableRow = ({ children }) => children.map(el => <tr key={el}>{el}</tr>)

范例：

 const TableRow = ({ children }) => children.map(el => <tr key={el}>{el}</tr>) const App = () => ( <TableRow> {['Am row', 'haha', 'yes', 'another row']} </TableRow> ) ReactDOM.render(<App />, document.getElementById('root')) 

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

Answer 2

componentWillMount被認為是舊版。 它在渲染之前被調用，因此會導致您的問題。 順便說一句，您應該改為在componentDidMount上設置狀態。

Answer 3

如果您確實需要將行轉換為狀態，則這是典型的getDerivedStateFromProps問題。 這樣，您一開始就不會觸發雙重狀態更改，但是您的狀態將立即包含所需的數據。 否則，直接從props渲染數據，然后將您的組件轉換為功能組件 。

Answer 4

問題實際上是您正在將行設置為子級（在componentWillMount處），而您無法知道子級是數組，單個元素還是未定義（無子級）。

React有一個幫助處理孩子類型的助手 ，它可以讓你做：

render() {
  return React.Children.map(this.state.row, (el,i) => {
    return (<tr>{el}</tr>)
  }) || false
}

另一方面，通常不建議將props復制到state，除非您只是播下一些初始狀態，這些狀態以后會被修改。 您也可以從渲染訪問道具。