动态反应 setState - 如何 setState 属性和 props 的值

Question

我正在尝试创建单个处理程序来更新状态。现在我有很多处理程序——每个组件一个。我想要做的是创建开关函数和一个处理程序来处理所有状态更改。

这里是switch函数，目前只有一种情况：

function liftingUpStateHandler(type, e, state){
    switch(type){
        case 'imageClickHandler':
            let array = state.bottomGalleryItems;
            const index = array.findIndex((object) => object.cardId === e);
            window.scrollTo({ top: 0, behavior: 'smooth' });
            return  ['items', [state.bottomGalleryItems[index]]]
        default:
            return null;
    }
}
export default liftingUpStateHandler;

我正在尝试在 app.js 主文件中创建一个处理程序：

  stateHandler = (type, e) =>{
    const result = liftingUpStateHandler(type, e);
    this.setState({result[1]: result[2]})
  }

如果这行得通，我只需将案例添加到 liftingUpStateHandler 并仅使用一个处理程序更新状态。

（一统天下）:)

我现在处理的是很多这样的函数：

loaderScreenHandler = (e) => {
    this.setState({loader: e})
  }

  modalCloseHandler = () =>{
    this.setState({noexifdatafilenames: []})
  }

  markerFlyerTo = (e) => {
    const index = (markerFlyerHandler(e, this.state));
    this.setState({ activeCard: index });
  }

  deleteItem = (e) => {
    const result = (deleteItemHandler(e, this.state));
    this.setState({ items: result[0]});
    this.setState({ activeCard: 0 });
  };

  changeActiveCardRight = () => {
    const result = (changeActiveCardRightHandler(this.state, 'right'));
    this.setState({ activeCard: result });
  }

  changeActiveCardLeft = () => {
    const result = (changeActiveCardRightHandler(this.state));
    this.setState({ activeCard: result});
  }

  closeHandler = () => {
    this.setState({ fullScreen: false})
  }

...但是我收到一个错误：

Failed to compile

./src/App.js
SyntaxError: C:\Users\Sławek\Desktop\dev\geolocapp\src\App.js: Unexpected token, expected "," (63:25)

  61 |   stateHandler = (type, e) =>{
  62 |     const result = liftingUpStateHandler(type, e);
> 63 |     this.setState({result[1]: result[2]})
     |                          ^
  64 |   }
  65 |
  66 |

这可能吗？或者我需要采取不同的方法，比如 REDUX？

Answer 1

this.setState({result[1]: result[2]})

要执行 computed object property，您需要在键周围使用方括号：

this.setState({ [result[1]]: result[2] })

此外，我认为你打算使用 result[0] 和 result[1]，所以它会是：

this.setState({ [result[0]]: result[1] })

动态反应 setState - 如何 setState 属性和 props 的值

React setState dynamically - how to setState property and value from props

javascript

setstate

reactjs

动态反应 setState - 如何 setState 属性 和 props 的值

React setState dynamically - how to setState property and value from props

javascript

setstate

reactjs

动态反应 setState - 如何 setState 属性和 props 的值