反应错误: TypeError: props.globalChange不是一个函数

Question

我有一个问题，在道具发送在同一个组件和功能不是功能问题来。那么如何解决这个问题呢？

import React, { useState } from 'react';

export default function Lifting() {
    const [data, setData] = useState(0);
    function globalChange(items) {
        setData({ data: items });
    }
    return (
        <div>
            <h1>Lifting State Up</h1>
            <LiftingChild val={data} onChange={globalChange} />
            <br />
            <LiftingChild val={data} onChange={globalChange} />
        </div>
    )
}

function LiftingChild(props) {
    return (
        <div>
            <input value={props.val} onChange={(e) => { props.globalChange(e.target.value) }} />
        </div>
    )
}

Answer 1

只是个命名问题。当您使用LiftingChild组件时，您可以添加globalChange作为onChange支柱，但是在LiftingChild组件中，您尝试调用不存在的globalChange。你需要把它叫做props.onChange。

<input value={props.val} onChange={(e) => { props.onChange(e.target.value) }} />

编辑:这暴露了调用setData的方式也是不正确的。您正在将新状态设置为一个对象，但它应该是一个数字，这样它就可以在窗体状态下继续使用。

function globalChange(item) {
        setData(item);
    }

请注意，因为两个子组件都使用相同的状态，所以更新一个将同时更新两个状态。这可能是可取的，也可能不取决于用例。

把所有这些放在一起看上去应该是这样的：

​

const { useState } = React;

function Lifting() {
    const [data, setData] = useState(0);
    function globalChange(items) {
        setData(items);
    }
    return (
        <div>
            <h1>Lifting State Up</h1>
            <LiftingChild val={data} onChange={globalChange} />
            <br />
            <LiftingChild val={data} onChange={globalChange} />
        </div>
    )
}

function LiftingChild(props) {
    
    return (
        <div>
            <input value={props.val} onChange={(e) => { props.onChange(e.target.value) }} />
        </div>
    )
}

ReactDOM.render(<Lifting />, document.getElementById('react'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

​