Question

我是redux的新手，但已达到搜索结果的有效负载。目前，我仅使用createListItems（）函数显示结果而不使用redux进行测试。

这是组件的代码。

已根据以下答案更新

  handleSubmit(event) {
    event.preventDefault()
    const apiSearchURL = `api}`
    get(apiSearchURL, { maxContentLength: 400 })
    .then((searchResults) => {
      this.props.dispatch(getSearchResults(searchResults))
    })
  }


  renderData = (props) => (
    <div>
      <p> {props.user.username} </p>
    </div>
  )

  render() {

    return (
      <div className="my-4">
        <div className="recomm">
          <div className="recomm_top">
            <span>Search</span>
          </div>
        </div>
        <div className="search_advan_box">
          <form onSubmit={this.handleSubmit.bind(this)}>
            <select
              name="religion"
              className="mb-2"
              value={this.state.formValues['religion']}
              onChange={this.handleChange.bind(this)}
            >
            ...

            <input
              type="submit"
              className="my-4 pri_btn p-2"
              value="Search Profiles"
            />
          </form>
            <h1>NEW Results</h1>
            { this.props.data
              ? this.props.data.map(user =>
              <this.renderData key={user.id} user={user} />)
              : null
            }
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  data: state.data,
})

export default connect(mapStateToProps)(SearchAdvanced)

Answer 1

您将需要使用mapStatetoProps将组件连接到redux状态。

function mapStateToProps(state) {
    return {
        data: state.data
    };
}

由于它是异步的，因此您将需要使用三元表达式以及.map（）才能将数据实际呈现到屏幕上。

         { this.props.data
           ? this.props.data.map(item =>
           <this.renderData key={item.id} item={item} />)
           : null
         }

最后一个功能组件

renderData = (props) => (
    <div>
      <p> {props.item.username} </p>
      <p> {props.item.firstname} </p>
    </div>
  )

React Redux-从有效负载中获取数据并显示在组件中

1 个答案: