Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/26.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 获取后反应setState(),而不是重新提交_Javascript_Reactjs_Fetch_Setstate - Fatal编程技术网

Javascript 获取后反应setState(),而不是重新提交

Javascript 获取后反应setState(),而不是重新提交,javascript,reactjs,fetch,setstate,Javascript,Reactjs,Fetch,Setstate,我在componentDidMount中获取数据,我以我想要的形式获取数据,我想用this.setState将它们保存在组件状态。 国家没有改变 我要记录我正在到达调用setState的点-存在条件 我试过这个 组件没有重新渲染,状态也没有更改,我想知道原因 我的代码: export class Offers extends Component { constructor(props) { super(props); this.renderOffer =

我在componentDidMount中获取数据,我以我想要的形式获取数据,我想用this.setState将它们保存在组件状态。 国家没有改变

我要记录我正在到达调用setState的点-存在条件 我试过这个 组件没有重新渲染,状态也没有更改,我想知道原因

我的代码:

export class Offers extends Component {
    constructor(props) {
        super(props);
        this.renderOffer = this.renderOffer.bind(this);
        this.state = {
        ...
        };
    }
    componentWillMount() {
        this.setState(() => ({
            offer: {},
            isLoading: true,
            isMyOffer: false,

            ...
        }));
    }

    componentDidMount() {
        console.log('MOUNTED');
        const { profile } = this.props;
        if (profile) {
            this.setState(() => ({
                isLoading: false
            }));
        }
        if (profile && profile._id) {
            this.setState(() => ({
                isMyOffer: true,
                ...
            }));

            fetch(`/api/offers-by/${profile._id}`,{
                method: 'GET'
            })
           .then(response => response.json())
           .then(offers => {
               if(!offers || !offers.length) {
                   this.setState(() => ({
                   isLoading: false
                  })
                  );
              } else {
                  console.log('ELSE', offers[0]._id); // getting proper data
                  console.log('THIS', this) // getting this object 
                  const offerData = offers[0]
                  this.setState(() => ({
                      offer: offerData,
                      isLoading: false
                  })) //  then
              }}) // fetch
              console.log('STATE', this.state)
          }
          console.log('STATE', this.state)
    }

setState有一个回调方法作为第二个参数。您应该在初始setState之后使用它。这是有效的,因为setState本身是一个异步操作。setState方法不会立即更新组件的状态,但如果有多个setState,它们将被批处理到一个setState调用中

this.setState(() => ({
            isLoading: false
        }),() =>{
   /// You can call setState again here and again use callback and  call fetch and invoke setState again..
});
理想情况下,您可以将一些setState重构为单个setState调用。从一个空对象开始,根据条件向对象添加属性

const updatedState ={}
if(loading){
 updatedState.loading = false
}
if(profile &&..){
 updatedState.someProperty = value.
}

this.setState(updatedObject,()=> {//code for fetch..
}) // Using the object form since you don't seem to be in need of previous State.

你试过调用setState来传递一个对象而不是一个函数吗?我没有,根据react源代码,这应该没关系。你怎么知道状态没有改变?如果调试尝试是通过console.logthis.state进行的,则调试错误。获取是异步的,因此在获取完成并执行之后,状态不会发生更改*。但是,即使您再次在then方法中记录状态,它也不会工作,因为setState也是异步的。使用setState回调来记录并查看状态是否已更改。我在render中也使用了console log,因此我在那里看到状态没有更改。我的错误没有将此信息包含在问题中。@AgataAndrzejewska如果访问了ELSE和this日志,则您发布的代码不应显示您描述的问题。您确定代码中没有其他部分可能会干扰状态设置吗?有控制台错误/警告吗?你能发布完整的组件代码,也许还有它的一个活版本吗?谢谢回复!你的建议帮我找到了解决办法。很好,很乐意帮忙