Question

我有以下几个团队被映射到团队组件：

parent.js

render() {
    let teamArray = this.props.teamsReducer.teams;
    <ul>
        {teamArray.map((team) => {
            <Team key={team._id} />
        })}
    </ul>
}

Team.js

render() {
    let getTeamDetailsAnimation = this.props.teamReducer.getTeamDetailsAnimation;

    return (
        <li className='indent'>
            <span className={"cta " + getTeamDetailsAnimation} onClick={() => {this.chooseTeam(team._id,team.name)}}>Select</span>
        </li>
    )
}

getTeamDetailsAnimation基本上从空字符串更新为“活跃”字样。在发出AJAX请求时，它会显示加载微调器。一旦AJAX请求完成，getTeamDetailsAnimation就会更新回一个空字符串，从而删除加载微调器。

我无法理解如何解决的问题是如何将getTeamDetailsAnimation应用于所点击的相关团队组件。目前看到渲染的每个Team组件都将teamReducer的那部分应用于它，当我单击一个并发出ajax请求以获取团队详细信息时，所有Team组件都会显示加载微调器。

我考虑过只在该Team组件中执行一个setState来保持该组件的本地状态，但问题是我的chooseTeam函数调度一个Thunk中的一个动作来发出Ajax请求，我需要只有当请求完成时才能更新状态，这不是该组件的本地。

由于我已设置模式以将我的所有AJAX请求保留在我的组件外部，我想尝试保持这种方式，是否可以将此AJAX请求保留在组件外部，仅限于我尝试定位相关组件？

谢谢！

Answer 1

您需要存储各个团队的加载状态，而不是整体

您teamReducer的结构必须类似于

const initialState = [
   {
       getTeamDetailsAnimation: '',
       // other properties
   }
]

为简单起见，您可以传递团队的索引以获得其加载状态

<强>父：

render() {
    let teamArray = this.props.teamsReducer.teams;
    <ul>
        {teamArray.map((team, index) => {
            <Team key={team._id} index={index}/>
        })}
    </ul>
}

<强>团队：

render() {
    let getTeamDetailsAnimation = this.props.teamReducer[this.props.index].getTeamDetailsAnimation;

    return (
        <li className='indent'>
            <span className={"cta " + getTeamDetailsAnimation} onClick={() => {this.chooseTeam(team._id,team.name)}}>Select</span>
        </li>
    )
}

React / Redux - 从映射数组中定位特定子节点

1 个答案: