Question

我有一个React应用。这个程序从服务器获取随机元素。之后，用户检查了一个，应用获得了新元素。这个程序很简单

getElements(){
  const id = this.props.id;
  axios.get(`ajax/elements/` + id)
    .then(res => {
      const elements = res.data;
      this.setState({ elements, loading: false });
     }).catch(error => {
        this.setState({ error });
     })    
}

render() {
  return <div className="container">
            <Elementlists elements={this.state.elements} />
         </div>             
}

我正在使用getElements方法以便从服务器获取元素（我正在使用componentDidMount）。问题是我想在用户检查元素之后获得新元素（这在其他组件中），并且我不想重复getElements方法。此时看起来像这样。

onSelect(id){
  const select = {
    element_id: id
  }

  axios.post(`ajax/select`, { select })
    .then(res => {
      //someting
    })
  }

  render() {
    return(
      <ul>
        { this.props.elements.map(element => <li key={element.id}>
          <div onClick={() => this.onSelect(element.id)} className="singleElement"  style={ { backgroundImage: "url("+element.cover+")" } 
            }>
          </div>
         </li>)}
      </ul>
    );
  }

在用户检查一个元素而不在其他组件中重复代码后，如何获取元素？

Answer 1

您将需要使用redux（或类似方法）进行全局应用状态管理。提取元素并存储redux应用状态后，即可在应用中连接和使用元素。

获取两个组成部分中的元素

1 个答案: