react、redux使用问题

匿名用户
  • 218

假设redux中的state是这样的:

state = {
    value:'aaa',
    list:['123','321','12231']
}

A组件是一个input,input的值对应state中的value。
B组件是一个list,list内容需要根据value值请求接口获取,比如http://api.com?query=aaa
如图:
clipboard.png

当A的值更新,重新获取list并渲染B组件,正常逻辑是这样:
change事件发异步action请求新的list ==> 更新redux state中的list ==> B组件渲染

现在的问题是,因为一些特殊的原因,无法在A组件change事件中增加代码。是否可以在B组件中,监听value值变化,来自行更新list?
如果在componentWillMount中获取并更新list,只会在B组件初始化时执行一次,当value变化时,不会再次执行。
如果在componentWillReceiveProps也加入获取并更新list的方法,因为是异步的,会导致循环请求和渲染。

求助!

回复
阅读 1.1k
3 个回答

似乎找到解决方法了,如果有更好的办法,请指正!

    componentWillMount() {
        const { value } = this.props;
        getAndUpdateList(value);
    }
    
    componentWillReceiveProps(nextProps) {
        const { value } = this.props;
        if (value != nextProps.value) {
            getAndUpdateList(value);
        }
    }

如果可以,在外面再包裹一层父组件,把A和B组件的状态state提升到父组件,A组件的value变化时,触发父组件的update函数,更新B组件的list

react16 有一个新的生命周期:

static getDerivedStateFromProps(nextProps, prevState)

这个生命周期就是用来根据props计算state的,它除了在组件实例化或重渲染时会被调用,也会在props变更时被调用,并且需要返回一个新的对象来更新组件的state

如果listB组件的私有状态:

static async getDerivedStateFromProps(nextProps, prevState) {
    const newState = prevState;
    const { value } = nextProps;
    newState.list = await getAndUpdateList(value);
    return newState;
}

使用redux store

static getDerivedStateFromProps(nextProps) {
    const { value } = nextProps;
    getAndUpdateList(value);
    // 返回 null 表示不更新状态
    return null;
}

如此,组件初始化后会去获取listvalue改变时也会去更新list

宣传栏