React 错误:TypeError:props.globalChange 不是函数

问题描述 投票:0回答:2

我在同一组件中发送道具时遇到问题,并且该功能不是功能问题。那么如何解决这个问题呢?

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>
    )
}
javascript html reactjs react-hooks
2个回答
0
投票

这只是一个命名问题。当您使用

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>


0
投票

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>

© www.soinside.com 2019 - 2024. All rights reserved.