时间戳

首页 > 解决方案 > React 组件的 defaultValue 不起作用

reactjs - React 组件的 defaultValue 不起作用

问题描述

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

但是，使用“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>
);

我在这里想念什么？

标签： reactjsinputcomponentsfetchdefault-value

解决方案

提供附加信息后编辑

在组件中使用传递的道具：

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

推荐阅读