根据对象中的键数渲染多个元素答案

【问题标题】：Render multiple elements based on number of keys in object根据对象中的键数渲染多个元素
【发布时间】：2019-10-17 08:14:24
【问题描述】：

我的对象 videoId 具有以下值：

我想根据对象中的键数渲染多个Player 组件，在本例中为2 个Player 组件。每个Player 组件也应该有不同的src 属性值。该值在对象中表示为file 属性。

到目前为止，我已经尝试使用map() 函数并且我设法从每个键中获取file 属性，但我不知道如何生成Player 组件。这是我的代码：

const response = await dataProvider(GET_MANY, 'vid', { ids: videoId })
const file = response.data;

let formsPerFile = file.map(async f => {
   var sigkey = "key";
   var formBody = new FormData();
   formBody.set('ver', "1.2");
   formBody.set('key', "key");
   formBody.set('video_id', f.file);
   formBody.set('user_id', "1234");
   formBody.set('format', "json");
   formBody.set('ip', "");
   formBody.set('tts', "0");
   formBody.set('nonce', Math.round((new Date()).getTime() / 1000));

   var sign_fields = [formBody.get('video_id'), formBody.get('user_id'), formBody.get('ip'), formBody.get('tts'), formBody.get('ver'), formBody.get('key'), formBody.get('nonce')];
   var data = sign_fields.join(':');
   var signature = hmacsha256(data, sigkey);

   formBody.set('sig', signature);

   var formBodyStringified = new URLSearchParams(formBody).toString();

   const resJson = await fetch(Config.api.livebox, {
         method: 'POST',
         body: formBodyStringified,
         headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
         }
         }).then(res => res.json());
                return 'https:' + resJson.hls;
 });
 this.setState({ multipleVideoSource: formsPerFile });

此代码将每个file 属性存储到状态中。

然后在我的render() 方法中：

render()
    {
        const { multipleVideoSource }  = this.state;
        return multipleVideoSource ? <Player key={multipleVideoSource} height={500} fluid={false}>
            <ControlBar autoHide={false} className="my-class" />
            <BigPlayButton position="center"/>
            <HLSSource isVideoChild src={multipleVideoSource} />
        </Player> : "No video";
    }

任何想法如何渲染多个Player 组件？

提前谢谢你。

【问题讨论】：

那么问题基本上是你想为videoId 对象中的每个键呈现一个Player 组件，同时还删除具有重复src 属性的组件？
我不想删除任何东西，src 总是不同的。我只想为 videoId 对象中的每个键呈现一个 Player 组件。并且这些组件中的每一个都将根据文件属性具有不同的 src。希望这很清楚。
@AdamSulc multipleVideoSource 是对象还是数组？
@UmairSarfraz 它是一个对象

标签： javascript reactjs loops

【解决方案1】：

循环遍历对象键并将每个对象 videoId 作为道具传递给 Player 组件。

Object.keys(multipleVideoSource).map((key) => (
    <Player key={key} src={multipleVideoSource[key]} />
));

【讨论】：

这也可以，但是@Joseph D. 首先解决了这个问题。不过谢谢。

【解决方案2】：

我不知道如何生成播放器组件

使用 map 循环遍历 multipleVideoSource 列表。

{
  multipleVideoSource.map(src => (
    <Player key={src} src={src} />
  ))
}

【讨论】：

谢谢，这确实渲染了组件。