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的{{1}}。

工作示例：

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'>可以简化为一行，以实现完全相同的行为：

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'))

Answer 2

componentWillMount被认为是旧版。它在渲染之前被调用，因此会导致您的问题。顺便说一句，您应该改为在componentDidMount上设置状态。

Answer 3

如果您确实需要将行转换为状态，则这是一个典型的getDerivedStateFromProps问题。这样，您一开始就不会触发双重状态更改，但是您的状态将立即包含所需的数据。否则，直接从props渲染数据，然后将组件转换为functional component。

Answer 4

问题实际上是您正在将行设置为子级（在componentWillMount处），而您无法知道子级是数组，单个元素还是未定义（无子级）。

React具有helper来处理孩子的打字，您可以这样做：

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

另一方面，通常将not recommended复制道具到状态，除非您只是播下一些初始状态，然后将其修改。您也可以从渲染器访问道具。

如何修复this.state。*。map不是函数？

4 个答案: