Ajax css操作发生在渲染之前，因此不会有效

我正在为我当前的项目使用react和redux。我有一个按钮，每当用户点击它时，它首先调用服务器并加载一些数据，然后操作一些dom元素的css。 这是我的密码：

 var allClickableStories = document.getElementById("dummyClickStory" + this.props.story.id);

    $(allClickableStories).click(function () {

        if (!$("#" + this.id + " .expansion-handler").hasClass("show")) {

            var storyId = this.id.replace("dummyClickStory", "");
            thisRef.props.getStoryDetail(storyId, thisRef.props.channel);
            $("#" + this.id + " .expansion-handler").addClass("show");
            $("#" + this.id + " .cutline").addClass("show");
        }
    });

另外值得注意的是，上面的代码在componentDidMount中使用，以确保第一次渲染发生。然而，这并不能保证ajax调用（thisRef.props.getStoryDetail）发生在css操作之前，而这正是我要解决的问题。发生的事情是发送ajax调用，然后启动css操纵，但是ajax调用可能会在之后返回，渲染将再次发生并隐藏被操纵的dom元素。解决此问题的简单方法是在jquery ajax调用中将asynch设置为false，但这不是一个好的解决方案。那么，我如何确保第一个ajax调用完成并进行渲染，然后进行css操作呢

这里还有我的代码和reducer，以获取更多信息：

行动：

export function getStoryDetail(storyId,channel){
return dispatch => {
    $.ajax({
        url: "http://localhost:3003/json5.txt",
        dataType: 'json',
        cache: false,
        success: function(data) {
            var storyDetatil=[];
            for (var key in data) {
                storyDetatil.push(data[key]);
            }
            var storyDetailObj={"storyArray":storyDetatil,"storyId":storyId, "channel":channel};
            dispatch({
                type: "STORY_EXPANSION",
                payload: storyDetailObj

            });
        }.bind(this)
    });
};

}

减速器：

 case "STORY_EXPANSION":
        var tempStateExpansion = state.slice();
        if (action.payload.storyId > -1  && state[0].channel !=undefined) {
            for(var i=0;i<state.length;i++){
                if(state[i].channel.toLowerCase()===action.payload.channel.toLowerCase()){
                    for(var j=0;j<state[i].storiesSnippet.length;j++){
                        if(action.payload.storyId===state[i].storiesSnippet[j].id){
                            tempStateExpansion[i].storiesSnippet[j]=action.payload.storyArray[0];
                            break;
                        }
                    }
                    break;
                }
            }
        }
        else{
            tempStateExpansion[0].storiesSnippet[0]=action.payload.storyArray[0];
        }
        state=tempStateExpansion;

        break;

案例“故事扩展”：
var tempStateExpansion=state.slice（）；
if（action.payload.storyId>-1&&state[0]。通道！=未定义）{
简言之，对于（var i=0；i来说，您不能使用React来实现这一点。您使用jQuery来操作DOM，这基本上与React相反。React为您操作DOM

相反，您应该做的是拥有一个组件（您可以查看内联样式：），该组件将基于更新的状态重新加载

应用程序以任何默认值呈现并触发ajax请求
Ajax响应更新redux存储，它通过
connect
和
mapstatetrops
更新组件的道具，该道具在Ajax请求完成时应该更改
基于新状态的组件重新渲染。渲染路径具有新样式（可能是内联的）
我建议在这里使用redux和React运行TODO列表示例：。您的redux使用看起来不错，问题在于React

下面是一个使用React组件的示例，该组件将基于redux状态的
data
属性重新加载。它假定您将拥有一个应用程序范围的CSS，其中包含
foo
和
bar
CSS类的定义

import React from 'react';
import { connect } from 'react-redux';

class Example extends React.Component {
  render() {
    const { data } = this.props;

    // If data is present (render a div using CSS from class foo)
    // and put the data in the div asuming it's a string
    if (data) {
      return <div className='foo'>{ data }</div>;
    }
    // If data is not present (render a div using CSS from class bar)
    // Display No Content
    return <div className='bar'>No Content</div>;
  }
}

// Data is an object, but not required as initially it will be undefined
Example.propTypes = {
  data: React.PropTypes.object
};

// Map redux state to react props
const mapStateToProps = state => ({
  data: state.data
});

// Connect to redux store helper using our mapping function
export default connect(mapStateToProps)(Example);

从“React”导入React；
从'react redux'导入{connect}；
类示例扩展了React.Component{
render（）{
const{data}=this.props；
//如果存在数据（使用类foo中的CSS呈现div）
//然后把数据放在div中，假设它是一个字符串
如果（数据）{
返回{data}；
}
//如果数据不存在（使用类栏中的CSS呈现div）
//不显示任何内容
不返回任何内容；
}
}
//数据是一个对象，但不是必需的，因为它最初是未定义的
示例.propTypes={
数据：React.PropTypes.object
};
//将redux状态映射到react道具
常量mapStateToProps=状态=>({
数据：state.data
});
//使用我们的映射函数连接到redux store helper
导出默认连接（MapStateTops）（示例）；