React.js，在 DOM 中迭代的正确方法答案

【问题标题】：React.js, correct way to iterate inside DOMReact.js，在 DOM 中迭代的正确方法
【发布时间】：2019-01-26 02:22:47
【问题描述】：

我是 ReactJS 的新手...

我有一个具有以下类组件结构的项目：

index.js
  --app
    --chat
  --header
  --left
  --right

在 chat.js 组件中，我使用 api 进行谷歌搜索以根据特定关键字检索图像...我的直观解决方案是：

this.client.search("cars")
                .then(images => {
                    for(let el of images) {
                    ReactDOM.render(<img src="{{el.url}}" syle="{{width: '100%'}}" />, document.querySelector('#gimages'));
                    }
                });

正确吗？或者我可以使用带有通量（redux）的存储状态的组件？

【问题讨论】：

标签： reactjs ecmascript-6 state-saving

【解决方案1】：

也许更简单更传统的 react 使用可以满足您的要求？

您可以遵循类似于下图所示的模式，以更“类似反应”的方式实现您的要求：

class Chat extends React.Component {

  constructor(props) {
    super(props)
    this.state = { images : [] } // Set the inital state and state
                                 // model of YourComponent
  }

  componentDidMount() {

    // Assume "client" has been setup already, in your component

    this.client.search("cars")
    .then(images => {

      // When a search query returns images, store those in the
      // YourComponent state. This will trigger react to re-render 
      // the component
      this.setState({ images : images })
    });
  }

  render() {

    const { images } = this.state

    // Render images out based on current state (ie either empty list, 
    // no images, or populated list to  show images)
    return (<div>
        { 
          images.map(image => {
              return <img src={image.url} style="width:100%" />
          })
        }
    </div>)
  }

}

请注意，这不是完整的代码示例，需要您使用当前聊天组件中的其他内容“填补空白”（即设置 this.client）

【讨论】：

images.map(image => (<img src={image.url} 地图功能在这里失败...
你得到什么错误？如果您想重试，请更新答案。添加缺失）
我收到了TypeError: images.map is not a function
对不起，好像谷歌不返回数组...所以我用Array.from(this.state.images)转换它

【解决方案2】：

这不是你应该走的路，你不需要为每个项目使用ReactDOM.render。实际上，您根本不需要使用ReactDOM.render。在您的组件中，您可以使用生命周期方法来获取数据，然后将其设置为本地状态。获取数据后，您可以将其传递给单个组件或直接在您的 render 方法中呈现。

class Chat extends React.Component {
  state = {
    images: [],
  }

  componentDidMount() {
    this.client.search( "cars" )
      .then( images => this.setState( { images } ) );
  }

  renderImages = () =>
      this.state.images.map( image => <Image key={image.id} image={image} /> );

  render() {
    return (
      <div>{this.renderImages()}</div>
    );
  }
}

const Image = props => (
  <div>
    <img src={props.image.url} syle="{{width: '100%'}}" />
  </div>
);

此时，您不需要 Redux 或其他任何东西。但是，如果你需要打开你的状态很多组件，你可以考虑一下。另外，要习惯于使用 map、filter 等方法，而不是 for 循环。

【讨论】：