如何在第一次渲染时将 parent 值传递给 child 并从 Child 更改 parent 组件值？

Question

所以我想做的是将一个数字传递给 child 组件，它只会在第一次渲染时传递。之后，我尝试更改当前值并将值从 child 传递回 parent 组件。但是我无法将价格传递给 child，因为我正在接收 undefined.

不确定如何在这种情况下传递数据，有什么想法吗？

function Parent(props, {price}) {
        const [amount, setAmount] = React.useState("200");
    
        function handleChange (newValue) {
          setValue(newValue);
        }
    
        // We pass a callback to Child
        return <Child price={amount} value={value} onChange={handleChange} />;
    }
    
    
function Child (props, {price}) {
        const [amount, setAmount] = React.useState("");
            
        function handleChange(event) {
              setAmount(event.target.value)
    
              // Here, we invoke the callback with the new value
              props.onChange(event.target.value);
        }
    
       useEffect(() => {
        setAmount(price) //Pass value from parent if it has one
      }, [])
          
      return <input value={props.value} onChange={handleChange} />
   }

Answer 1

对于这个用例，您只需要将一个值从父组件传递给它的子组件。您正在以某种方式重复值，这是不必要的并且会导致混淆。使用 amount 或 value 状态变量，不能同时使用。

解决这个问题：

在 <Parent/> 和 <Child/> 中仅使用 amount 状态变量。
在 handleChange() 函数中将 setValue() 调用更改为 setAmount()。
删除传递给 <Child/> 的 value 属性。
从 <Child/> 中删除解构值 {price} 并通过 value 属性访问 useEffect() 挂钩中的 amount。

此外：

不要在组件的参数列表中同时使用props和解构的{propVariable}语法。使用其中之一，而不是两者都使用。

父组件：

function Parent(props) {
    const [amount, setAmount] = useState("200");

    function handleChange(newValue) {
        setAmount(newValue);

        // You can use this to test that the child component is triggering 
        // the handleChange() function prop passed to it.
        console.log(newValue); 
}

    // We pass a callback to Child
    return <Child value={amount} onChange={handleChange} />;
}

子组件：

function Child(props) {
    const [amount, setAmount] = useState("");

    function handleChange(event) {
        setAmount(event.target.value);

        // Here, we invoke the callback with the new value
        props.onChange(event.target.value);
    }

    useEffect(() => {
      setAmount(props.value); //Pass value from parent if it has one
    }, []);

  return <input value={props.value} onChange={handleChange} />;
}

但是，甚至 <Child/> 中的所有上述内容都不是必需的。您只需要子组件中的 props，并且不需要按照最佳实践维护内部状态，即仅在父组件中拥有单一的事实来源和控制状态，因此您可以修改 <Child/> 进一步：

function Child(props) {
    function handleChange(event) {
        // Here, we invoke the callback with the new value
        props.onChange(event.target.value);
    }

    return <input value={props.value} onChange={handleChange} />;
}

如何在第一次渲染时将 parent 值传递给 child 并从 Child 更改 parent 组件值？

How to pass parent value to child on first render and change parent component value from Child?

javascript

components

undefined

reactjs

react-props