React 组件的 defaultValue 不起作用

Question

我正在尝试使用从数据库获取的值作为输入字段的默认值（在单击组件之前显示）。

但是，使用“defaultValue”属性，不会显示获取的值。

App.tsx 文件（值获取成功）：

  const [Income, setIncome] = useState<string>('0');

    useEffect(() => {

    const incomeResp = async () => {
      await axios.get('http://localhost:4000/app/income')
      .then(
        result => setIncome(result.data && result.data.length > 0 ? result.data[0].income : 0))
    }
    incomeResp();
  }, []);


  return (
      <div className="App">
        <div>
          <IncomeExpensesContainer 
            income={Income}
            setIncome={setIncome} 
            totalExpenses={TotalExpensesAmount} 
            currencySymbol={Currency}
          />
      </div>

组件文件：

interface Props {
    income: string;
    setIncome: (value: string) => void; 
    totalExpenses: number;
    currencySymbol: string;
}

const IncomeExpensesContainer: React.FC<Props> = ({
        income,
        setIncome, 
        totalExpenses, 
        currencySymbol,
    }: Props) => {


   const [insertedValue, setInsertedValue] = useState<string>(income);

return (
    <Grid container spacing={1} className="income-expenses-container">
        <InputItem 
            onChange={setInsertedValue}
            onBlur={setIncome}
            title="Income" 
            type="number" 
            placeholder="Your income" 
            defaultValue={income}
        />
    </Grid>
);

我在这里缺少什么？

Answer 1

提供附加信息后进行编辑

在组件中使用传递的 prop：

const Component = (props) => {
       return (
            <InputItem 
              onChange={setInsertedValue}
              onBlur={setIncome}
              title="Income" 
              type="number" 
              placeholder="Your income" 
              defaultValue={props.income}
        />
}

Answer 2

对于将来遇到此问题的任何人，对我有用的解决方案是在传递数字类型值时使用 javascript 的内置类型转换方法。 例如这个

const Component = (props) => {
       return (
            <InputItem 
              onChange={setInsertedValue}
              onBlur={setIncome}
              title="Income" 
              type="number" 
              placeholder="Your income" 
              defaultValue={props.income}
        />
}

调用时应收到默认值

<InputItem 
        onChange={setInsertedValue}
        onBlur={setIncome}
        title="Income" 
        type="number" 
        placeholder="Your income" 
        defaultValue={income.toFixed(0)} // toString and toPrecision work as well 
    />

我认为这是在 React Native TextInput 组件的幕后发生的事情，尽管我没有任何资源证明这一点。

希望有帮助。