jsx

Question

我正在尝试显示数组中的图像，但是当我将src值作为表达式{}传递时，它只是以对象的形式返回而不是字符串。任何人都可以解释吗？

export default class Home extends Component{
    constructor(){
        super();
        this.state = {};
    }
    componentWillMount(){
        var url = "https://api.github.com/users";
        request.get(url).then((response) => {
            this.setState({
                users: response.body
            });
        });
    }
    render(){ 
        // this.state.users returns all users information (name, image...)
        const userName = _.map(this.state.users, (user) =>{
            return <li>{user.login}</li>
        });
        const repoURL = _.map(this.state.users, (repoUrl) =>{
            return <li>{repoUrl.repos_url}</li>
        });

        const eachAvatar = _.map(this.state.users, (avatar) =>{
            return <li>{avatar.avatar_url}</li>
        });

        return(
        <div>
        <h2>Here is the list of users in gitHub</h2>
        <table>
        <tr>
        <th>UserName</th>
        <th>Repo URL</th>
        </tr>
        <tr>
        <td>{userName}</td>
        <td>{repoURL}</td>
        <td><img  src={eachAvatar} /></td>
        </tr>
        </table>
        </div>
    );
    }
}

输出：

Answer 1

我猜你想要一个图片列表，所以在你的地图中渲染img标签：

const allAvatars = _.map(this.state.users, (avatar) =>{
            return <li><img src={avatar.avatar_url} /></li>
        });

然后渲染所有头像

<td>{allAvatars}</td>