ReactJs 对象文字函数更新整个状态而不是预期答案

【问题标题】：ReactJs object literal function updates entire state and not the intendedReactJs 对象文字函数更新整个状态而不是预期
【发布时间】：2020-05-18 20:08:38
【问题描述】：

我有一个简单的字体真棒星评级。只有被点击的星星应该变成橙色，其余的不应该。橙色星的类别取决于状态。代码如下

   import React, {useState} from 'react';
   import './rating.css';

function Rating() {

  const [state, setState] = useState({first:false, second:false, third:false, fourth:false, 
                                     fifth:false});

    const rate = (index) => {
        console.log(index)
        return{
            '1': setState(prevState=>({...prevState, first: !state.first })),
            '2': setState(prevState=>({...prevState, second: !state.second })),
            '3': setState(prevState=>({...prevState, third: !state.third })),
            '4': setState(prevState=>({...prevState, fourth: !state.fourth })),
            '5': setState(prevState=>({...prevState, fifth: !state.fifth }))
        }[index]
    };

    return (
        <div className="rating">
            <span className={`fa fa-star ${state.first ? "checked" : ""}`} onClick={()=>rate('1')}></span>
            <span className={`fa fa-star ${state.second ? "checked" : ""}`} onClick={()=>rate('2')}></span>
            <span className={`fa fa-star ${state.third ? "checked" : ""}`} onClick={()=>rate('3')}></span>
            <span className={`fa fa-star ${state.fourth ? "checked" : ""}`} onClick={()=>rate('4')}></span>
            <span className={`fa fa-star ${state.fifth ? "checked" : ""}`} onClick={()=>rate('5')}></span>
        </div>
    )
}

export default Rating;

问题是当我点击一颗星星时，所有星星都会变黄。预计速率函数中的索引将决定切换哪个星的状态。控制台记录...索引在速率函数中正确。我试过没有 prevState/callback 和下面的匿名函数。没有任何帮助。 这里出了什么问题？

'1': ()=>setState(prevState=>({...prevState, first: !state.first }))

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

我不太确定你希望 rate 函数做什么。看起来你已经创建了一个对象，它应该为每个索引都有一个方法，然后你试图调用它由[index]?这种方式不仅过于复杂，而且设置也不正确。您在每个方法上调用 setState，而不是分配函数（如 () => setState(...)）。

我建议你根本不要使用这个“索引”系统，只传递你想要更新的值：

const rate = (name) => {
  setState({ ...state, [name]: !state[name] });
};

...

// Example usage:
<span className={`fa fa-star ${state.first ? "checked" : ""}`} onClick={()=>rate('first')}></span>

如果你打算使用对象样式，试试这个（未经测试）：

const rate = (index) => {
  let actions = {
    '1': () => setState(prevState=>({...prevState, first: !prevState.first })),
    '2': () => setState(prevState=>({...prevState, second: !prevState.second })),
    '3': () => setState(prevState=>({...prevState, third: !prevState.third })),
    '4': () => setState(prevState=>({...prevState, fourth: !prevState.fourth })),
    '5': () => setState(prevState=>({...prevState, fifth: !prevState.fifth }))
  };

  actions[index]() // <-- call it with ()
};

【讨论】：