Javascript 接收要在组件中渲染的数组_Javascript_Reactjs

Javascript 接收要在组件中渲染的数组

javascript reactjs

Javascript 接收要在组件中渲染的数组,javascript,reactjs,Javascript,Reactjs,我正在尝试将保存的缩略图URL的状态传递到数组状态。但当我的Netflix组件视频中的评估为空时？当我控制台它时，它在tile{“videos”：[]} 渲染 return ( <div className="explore"> <div className="row"> <NetflixTile videos={this.state.thumbnail} /> </div> </div> );

我正在尝试将保存的缩略图URL的状态传递到数组状态。但当我的Netflix组件视频中的评估为空时？当我控制台它时，它在tile{“videos”：[]}

渲染

return (
  <div className="explore">
    <div className="row">
      <NetflixTile videos={this.state.thumbnail} />
    </div>
  </div>
);

 constructor(props) {
        super(props);
        this.props.getVideos();
        this.state = {
          thumbnail: []
        };
      }

const NetflixTile = videos => {
  console.log("In tile " + JSON.stringify(videos.videos));
  if (videos.length != null) {
    for (let i = 0; videos > i; i++) {
      return (
        <div className="row__inner">
          <div className="tile">
            <div className="tile__media">
              <img
                className="tile__img"
                id="thumbnail"
                src={videos[i]}
                alt=""
              />
            </div>
          </div>
        </div>
      );
    }
  } else {
    return (
      <div>
        <h1>
          You have not yet uploaded any STEM content. Go to your dashboard page
          and click Upload to add to this library.
        </h1>
      </div>
    );
  }
};

export default NetflixTile;

DidMount已编辑

componentDidUpdate() {
    console.log("Component updated?");

    let i = 0;
    if (this.props.videos == null) {
      console.log("It's null");
    } else {
      const videos = this.props.videos.video.map(video => {
        <h5 key={video._id}>{video.thumbnail}</h5>;
        this.state.thumbnail[i] = video.thumbnail;
        console.log(this.state.thumbnail);
        i++;
      });
    }
  }

componentDidUpdate（）{
日志（“组件更新了？”）；
设i=0；
如果（this.props.videos==null）{
log（“它是空的”）；
}否则{
const videos=this.props.videos.video.map（video=>{
{video.缩略图}；
this.state.thumboil[i]=video.thumboil；
log（this.state.缩略图）；
i++；
});
}
}

添加到渲染中的Netflix组件

return (
  <div className="explore">
    <div className="row">
      <NetflixTile videos={this.state.thumbnail} />
    </div>
  </div>
);

 constructor(props) {
        super(props);
        this.props.getVideos();
        this.state = {
          thumbnail: []
        };
      }

const NetflixTile = videos => {
  console.log("In tile " + JSON.stringify(videos.videos));
  if (videos.length != null) {
    for (let i = 0; videos > i; i++) {
      return (
        <div className="row__inner">
          <div className="tile">
            <div className="tile__media">
              <img
                className="tile__img"
                id="thumbnail"
                src={videos[i]}
                alt=""
              />
            </div>
          </div>
        </div>
      );
    }
  } else {
    return (
      <div>
        <h1>
          You have not yet uploaded any STEM content. Go to your dashboard page
          and click Upload to add to this library.
        </h1>
      </div>
    );
  }
};

export default NetflixTile;

const NetflixTile=videos=>{
log（“In-tile”+JSON.stringify（videos.videos））；
如果（videos.length！=null）{
对于（让i=0；视频>i；i++）{
返回(
);
}
}否则{
返回(
您尚未上载任何STEM内容。请转到仪表板页面
然后单击“上载”以添加到此库。
);
}
};
导出默认Netflix文件；

this.state.缩略图的控制台输出**
好的，既然您已经有了或多或少的有效解决方案，那么让我用一些建议更新我的答案：）
异步调用（如fetch）应在componentDidMount
中执行（在React的挂起和异步内容落地之前是正确的）
如果您不修改父组件的视频状态，请直接使用道具，无需在此处对任何状态进行修改
在另一种情况下，请记住，componentdiddupdate
将在每次属性更改或状态更改后调用。之前，我建议对这种逻辑使用组件willreceiveprops
。但对于React 16，您可以使用getDerivedStateFromProps
。以下是我们的建议：
如果你想在道具改变时“重置”一些状态，请考虑
用钥匙使部件完全受控或完全不受控
相反
如您所见，最好在组件外部处理此类比较逻辑（例如，props.videos！==state.videos
），并使此组件完全受控，因此它直接呈现道具，并仅在收到新道具时更新
尽量减少setState
调用，但是，即使使用当前的解决方案，您也可能没有注意到很大的差异-这是因为React is批处理状态更新
在JSX中，对于

循环和

if

语句，最好使用

Array.prototype.map

和三元运算符，而不是

。更喜欢使用值转换，而不是命令式语句跳转
应用这些建议，结果可能是这样的：
class VideosParentComponent extends React.Component {
  static getDerivedStateFromProps(props, state) {
    if (props.videos !== state.videos) {
      return { videos: props.videos }
    }

    return null
  }

  state = { videos: [] }

  componentDidMount() {
    this.props.getVideos()
  }

  render() {
    const thumbnails = this.state.videos.video.map(video => video.thumbnail)
    return (
      <div className="explore">
        <div className="row">
          {thumbnails.length !== 0
            ? <NetflixTitle videos={thumbnails} />
            : (
              <div>
                <h1>
                  You have not yet uploaded any STEM content. Go to your dashboard page
                  click Upload to add to this library.
                </h1>
              </div>
            )}
        </div>
      </div>
    )
  }
}

const NetflixTitle = ({ videos }) => (
  <div className="row__inner">
    {videos.map(x => (
      <div key={x} className="tile">
        <div className="tile__media">
          <img
            id={`thumbnail_${x}`}
            src={x}
            className="tile__img"
            alt=""
          />
        </div>
      </div>
    ))}
  </div>
)

Netflix组件代码
const NetflixTile = ({ videos }) => {
      console.log("In tile " + JSON.stringify(videos));
      if (videos.length != 0) {
        for (let i = 0; videos > i; i++) {
          return (
            <div className="row__inner">
              <div className="tile">
                <div className="tile__media">
                  <img
                    className="tile__img"
                    id="thumbnail"
                    src={this.state.thumbnail[i]}
                    alt=""
                  />
                </div>
              </div>
            </div>

 constructor(props) {
        super(props);
        this.props.getVideos();
        this.state = {
          thumbnail: []
        };
      }
      componentDidUpdate() {
        console.log("Component updated?");

        let i = 0;
        if (this.props.videos == null) {
          console.log("It's null");
        } else {
          const videos = this.props.videos.video.map(video => {
            <h5 key={video._id}>{video.thumbnail}</h5>;
Added -->           this.setState({
      -->        thumbnail: video.thumbnail
            });
            //this.state.thumbnail[i] = video.thumbnail;
            console.log(this.state.thumbnail);
            i++;
          });
        }
      }

      render() {
        //return <div>{videos}</div>;
        return (
          <div className="explore">
            <div className="row">
              <NetflixTile videos={this.state.thumbnail} />
            </div>
          </div>
        );
      }
    }

constnetflixtile=（{videos}）=>{
log（“在tile中”+JSON.stringify（视频））；
如果（videos.length！=0）{
对于（让i=0；视频>i；i++）{
返回(

渲染组件代码
const NetflixTile = ({ videos }) => {
      console.log("In tile " + JSON.stringify(videos));
      if (videos.length != 0) {
        for (let i = 0; videos > i; i++) {
          return (
            <div className="row__inner">
              <div className="tile">
                <div className="tile__media">
                  <img
                    className="tile__img"
                    id="thumbnail"
                    src={this.state.thumbnail[i]}
                    alt=""
                  />
                </div>
              </div>
            </div>

 constructor(props) {
        super(props);
        this.props.getVideos();
        this.state = {
          thumbnail: []
        };
      }
      componentDidUpdate() {
        console.log("Component updated?");

        let i = 0;
        if (this.props.videos == null) {
          console.log("It's null");
        } else {
          const videos = this.props.videos.video.map(video => {
            <h5 key={video._id}>{video.thumbnail}</h5>;
Added -->           this.setState({
      -->        thumbnail: video.thumbnail
            });
            //this.state.thumbnail[i] = video.thumbnail;
            console.log(this.state.thumbnail);
            i++;
          });
        }
      }

      render() {
        //return <div>{videos}</div>;
        return (
          <div className="explore">
            <div className="row">
              <NetflixTile videos={this.state.thumbnail} />
            </div>
          </div>
        );
      }
    }

构造函数（道具）{
超级（道具）；
this.props.getVideos（）；
此.state={
缩略图：[]
};
}
componentDidUpdate（）{
日志（“组件更新了？”）；
设i=0；
如果（this.props.videos==null）{
log（“它是空的”）；
}否则{
const videos=this.props.videos.video.map（video=>{
{video.缩略图}；
添加-->this.setState({
-->缩略图：video.缩略图
});
//this.state.thumboil[i]=video.thumboil；
log（this.state.缩略图）；
i++；
});
}
}
render（）{
//返回{视频}；
返回(
);
}
}
您是否在componentDidMount
中获取数据？数据不会立即加载，因此视频
在第一次渲染时将是一个空数组。您也在使用此.state.thumbnail
和视频
而不是NetflixTile
中的视频。不确定如何获得视频实现了.state.thumbnails
，因为在您的示例中只有一个空的初始状态。如果此getVideos
调用是异步的（例如网络）然后调用componentDidMount
和setState
。我添加了我的componentDidMount代码，很抱歉最初没有这样做。第二次通过呈现我的this.state.thumbnails得到填充。这在上面的输出中得到了安慰。我不确定为什么会发生这种情况lol@amankkg，你的建议奏效了！谢谢你！我最初尝试过这个，但它一直返回一个空数组，里面甚至没有显示“视频”。那么你是如何获得控制台输出的？在tile[]
中，就像这样让我来修改一下，它正在读取this.state.videos.map（video=>video.缩略图）
为空。_Enigma已更新以匹配视频的形状。命名有点混乱：）