反应状态缺失

Posted 2023-02-22

【中文标题】反应状态缺失

【英文标题】：React state missing

【发布时间】：2020-05-31 19:42:32

【问题描述】：

我正在使用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)
;

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

【参考方案1】：

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

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

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

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

还有：

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

【讨论】：

谢谢！现在它工作得很好。你添加了我需要的东西。关于您指向的复制功能，当我从const [points, setPoints] = useState(copy); 删除副本时，它似乎仍在工作。然而，IDE 说 Argument type [p: string]: number, [p: number]: number 不能分配给参数类型 ((prevState: undefined) => undefined) | undefined 当您看到这个问题时，您是否知道这里发生了什么？感谢您的洞察力。

我觉得你可以把副本放在那里，我想我只是因为命名而感到困惑XD

事实上，当我将const [points, setPoints] = useState(copy); 更改为const [points, setPoints] = useState(); 时，没有任何问题。再次感谢您。

不用担心 :) （如果您可以将我的答案标记为已接受的答案，将不胜感激：D）