Question

我正在尝试传递已保存为数组状态的缩略图URL的状态。但是，在我的Netflix组件中进行评估时，视频是否为空？当我对其进行控制台时，它将返回pool[1].z = 500 pool[2].z = 200 -- sort table by Z property print(pool[1].z) -- prints 200 print(pool[2].z) -- prints 500

渲染

In tile {"videos":[]}

构造函数

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

DidMount已编辑

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

Netflix组件已添加到渲染器中

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++;
      });
    }
  }

** 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;的控制台输出**

Answer 1

好的，因为您有或多或少的有效解决方案，所以让我用一些建议来更新我的答案吧：）

异步调用（例如提取）应在componentDidMount中执行（直到到达React的Suspense和异步内容为止，这都是事实）；
如果您不打算修改视频的父组件状态，请直接使用道具，而无需在这里担心任何状态。
在另一种情况下，请记住，componentDidUpdate将在每次更改道具或更改状态后被调用。以前，我建议对这种逻辑使用componentWillReceiveProps。但是在React 16中，您可以改用getDerivedStateFromProps。 official docs的建议如下：

如果您想在道具更改时“重置”某些状态，请考虑用钥匙使组件完全受控或完全不受控制代替。

如您所见，最好在组件外部处理这样的比较逻辑（例如props.videos !== state.videos），并使该组件受到完全控制，以便直接渲染道具并仅在收到新道具时进行更新。
尝试最小化setState调用，但是，即使使用当前解决方案，您也可能不会注意到很大的不同-这是因为React正在批处理状态更新。
在JSX中，最好使用Array.prototype.map和三元运算符，而不是for循环和if语句。宁愿使用值转换而不是命令式语句跳转。

应用这些建议可能最终会像这样：

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

初始答案

您正在将视频作为JSX中的道具传递，而不是作为函数参数传递。这就是为什么您应该在目标组件中将它作为道具中的键来检索的原因。

const NetflixTitle = ({ videos }) => { // rest of the code

Answer 2

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>
        );
      }
    }

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

2 个答案:

初始答案