如何使用 props 和 spread 运算符从子组件中操作状态？

Posted 2023-02-22

【中文标题】如何使用 props 和 spread 运算符从子组件中操作状态？

【英文标题】：How do I manipulate state from a child component using props and spread operator?

【发布时间】：2022-01-03 11:03:12

【问题描述】：

我传的是props.key和props.expansion，它们的数据类型分别是字符串和对象。

在 if 语句中，JS 引擎对展开​​运算符(props.key: true) 之后的第二个参数抛出错误，错误消息说需要逗号。 我在代码中没有看到任何错误。

请针对 if 语句中 props.selectExpansion 的参数（尤其是第二个参数）指出并提出解决方案。

const Expansion = (props) => 

return (
    // unique props.key is the expansion name
    <div className=props.key onClick=() => 
    // only alters the expansionList state by changing the expansion name corresponding to props.key
        
    // change the boolean value of expansion on expansionList
        if(!props.expansion[props.key]) 
            props.selectExpansion(...props.expansion, props.key: true)
         else 
            props.selectExpansion(...props.expansion, props.key: false)
        
    >
        
      <h1>Expansion</h1>
    </div>
    );

 
export default Expansion;

【问题讨论】：

我认为您打算将对象作为第二个参数传递，但您直接传递它。用花括号把它包起来。 [props.key]: true

嗨，我的意图是使用 selectExpansion 设置状态。该状态有 24 个键/值对，所以我使用的是扩展语法。然后我使用 props.key:true (或 false) 只更改一个键/值对。它不工作。更新）您的解决方案有效！

您确定props.key 甚至可以在组件中访问吗？ React 有几个 非常特别的 属性，key 和 ref，它们不会传递给子组件。换句话说，它们不能从子组件访问。如果props.key 可以通过某种方式访问​​，那么您需要传递一个对象，将props.key 作为动态属性名称，即props.selectExpansion( ...props.expansion, [props.key]: true )。

@DrewReese 在我解决了这个问题之后，我肯定也必须检查一下。感谢您指出；你救了我一个问题

【参考方案1】：

为了更好地理解，我认为我们需要查看父组件，但我认为您正在尝试设置状态，因为它只是使用更新的键值。因此，您需要将参数包装在一个对象中。

const Expansion = (props) => 

return (
    // unique props.key is the expansion name
    <div className=props.key onClick=() => 
    // only alters the expansionList state by changing the expansion name corresponding to props.key
        
    // change the boolean value of expansion on expansionList
        if(!props.expansion[props.key]) 
            props.selectExpansion(...props.expansion, props.key: true)
         else 
            props.selectExpansion(...props.expansion, props.key: false)
        
    >
        
      <h1>Expansion</h1>
    </div>
    );

 
export default Expansion;

看看我用过这个

props.selectExpansion(...props.expansion, props.key: true)

代替

props.selectExpansion(...props.expansion, props.key: true)

之前您将 2 个参数传递给 setState(selectExpansion) 函数。

【讨论】：

我犯了一个非常愚蠢的错误，谢谢！

另外，这个关键属性是反应道具的一部分还是一个单独的属性？你能访问它吗？这可能仍然行不通。您必须执行类似 props.selectExpansion(...props.expansion, [props.key]: true) 的操作。仅当密钥可访问且不是 react 属性时。

【参考方案2】：

很难说props.expansion 是什么，如果您想更改该对象内部的某些内容，可以将代码更改为以下内容：

// change the boolean value of expansion on expansionList
if(!props.expansion[props.key]) 
    props.selectExpansion(...props.expansion, [props.key]: true)
 else 
    props.selectExpansion(...props.expansion, [props.key]: false)