为什么不同的jsx元素在react组件中不起作用?

 收藏

I have working code that uses table, working code

render(){
    this.props.boards.sort((boardA, boardB) => {return boardA.id - boardB.id })
    const sortRow = this.props.boards.map(board => {
        return (
            <tr key={board.id}>
                    <td>{board.id}</td>
                    <td>{board.author}</td>
                    <td>{board.title}</td>
                    <td>{board.created}</td>
                    <td>{board.updated}</td>
                    <td>
                        <button className="btn btn-danger btn-sm" onClick={this.props.deleteBoard.bind(this, board.id)}>
                            Delete
                        </button>
                    </td>
                </tr>
        )
    })
    return (
        <Fragment>
            <table className="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>          
                            <th>Author</th>      
                            <th>Title</th>        
                            <th>Created</th>        
                            <th>Updated</th>        
                            <th />                
                        </tr>                      
                    </thead>                        
                    <tbody>                   
                    {this.props.boards.length > 0 && (sortRow)}
                    </tbody>
                    </table>
        </Fragment>
    )
}

但是,如果我使用其他元素,则它不起作用。

 constructor(props){
        super(props)
        this.createCard = this.createCard.bind(this)
    }
    static propTypes = {
        boards: PropTypes.array.isRequired,
        getBoards: PropTypes.func.isRequired,
        deleteBoard: PropTypes.func.isRequired,
    }
    componentDidMount() {
        this.props.getBoards();
    }
    createCard(board) {
        return (
            <div key={board.id}>
                <div className="card text-white bg-primary mb-3" style="max-width:20rem">
                    <div className="card-header">{board.author}</div>
                    <div className="card-body">
                        <h4 className="card-title">{board.title}</h4>
                        <p className="card-text">{board.body}</p>
                        <img src={board.image} style="max-width:100px"/>
                    </div>
                </div>
            </div>

        )
    }

    render() {
        this.props.boards.sort((boardA, boardB) => { return boardA.id - boardB.id });
        const cardBoard = this.props.boards.map(this.createCard);
        return (
            <Fragment>
                <h2>Boards</h2>
                {this.props.boards.length > 0 && (cardBoard)}
            </Fragment>
        )
    }

I get Uncaught (in promise) TypeError: Cannot read property 'data' of undefined. That data is from the my redux action.

export const getBoards = () => (dispatch, getState) => {
    axios
      .get("api/boards/", tokenConfig(getState))
      .then(res => {
          dispatch({
              type: GET_BOARDS,
              payload: res.data
          })
      })
      .catch(err => dispatch(returnErrors(err.response.data, err.response.status)));
}

我认为这两种方法都可以绘制道具,所以应该不会有问题,但是由于我是React的新手,所以我在这里必须错过一些概念。

回复