反应状态缺失

Question

我正在使用React，但我似乎无法正确定义组件的状态（handlePoints）。当我想使用浅拷贝分配新状态时，它会创建一个新条目（键）。

抱歉，部分问题不在代码中。我无法在这里编辑它。如果您需要更多信息，请与我们联系。谢谢！我添加了一张图片，您可以在其中看到添加了一个新条目，而不是对现有条目进行修改。

cons anecdotes = ['Anecdote A', 'Anecdote B', 'Anecdote C', 'Anecdote D', 'Anecdote E', 'Anecdote F']
const Button = ({text, onClick}) => <div>
<button onClick={onClick}>{text}</button>

const records = () => {
  const temp = {};
  for (let i = 0; i < anecdotes.length; i++) {
    temp[i] = 0;
  }
  return temp}

const copy = {...records()};


const App = (props) => {
console.log('Copy', copy);
const [selected, setSelected] = useState(0);
const [points, setPoints] = useState(copy);
const handleSelection = () => {
    setSelected((Math.random() * (anecdotes.length) ) << 0);
};
const handlePoints = () => {
    setPoints({...copy, selected: copy[selected] += 1})
};

return (
    <div>
        <p>{JSON.stringify({copy})}</p>
        <p>{JSON.stringify({points})}</p>
        <p>Selected:  {selected}</p>
        <Button onClick={handleSelection} text={'next anecdote'}/>
        <Button onClick={handlePoints} text={'vote'}/>
        has {copy[selected]} votes <br/>
        {props.anecdotes[selected]} <br/>
    </div>
);};

我无法正确设置状态的行是：

const handlePoints = () => {
    setPoints({...copy, selected: copy[selected] += 1})
};

如您所见，添加了一个新条目，而不是更新现有条目之一。

Answer 1

就为什么要添加键为“selected”的新字段而言，这取决于您创建新对象的方式。 如果要使用所选变量更新键，则需要将 handlePoints 函数修改为：

const handlePoints = () => {
    setPoints({...copy, [selected]: copy[selected] += 1})
};

所选变量周围的括号是它如何确定使用所选变量的值。而不是将其解释为“选定”键。这是利用 emca2015 中引入的计算属性名称。 More info - Computed property names

希望这能解决您的问题 :) 祝你好运：D

还有：

至于我所看到的，您的复制功能实际上并没有复制任何对象，它似乎是默认值？或者目的仅仅是为存在的轶事数量创建密钥？ 只是好奇XD