Reactjs - TypeError:无法读取 null 的属性“值" [英] Reactjs - TypeError: Cannot read property 'value' of null

问题描述

我是新手，还在用 reactjs 练习.我的输入表单有问题，每当我输入任何键时，我总是得到 TypeError:无法读取 null 的属性值"

这是我的代码:

import React, { useState } from 'react';导出默认函数 FormPractice() {const [isDefault, setIsDefault] = useState('');const [balance, setBalance] = useState({amount: null});返回 (<div className="输入"><input placeholder="在此处输入余额" onChange={e =>setBalance(form => ({...form, [e.target.value]: e.target.value}))} value={isDefault}/>

)}

感谢您的帮助.

解决方案

React re-使用事件.当您使用功能更新时，在调用该函数时，该事件已被擦除以供重用.要在功能更新中使用该事件，您需要调用 e.persist()，这将从重用池中取出该事件并让它保留其值.

为了保持内联，它看起来像这样:

onChange={e =>{e.persist();setBalance(form => ({...form, [e.target.value]: e.target.value}))}}

或者为了让它更易读，把它移到它自己的函数中:

const onChange = (e) =>{e.persist();setBalance(form => ({...form, [e.target.value]: e.target.value}));}

然而，最简单的可用解决方案是根本不使用功能更新.您正在替换状态值，但没有设置从先前状态派生的任何值.所以使用正常更新是安全的:

onChange={e =>setBalance({...balance, [e.target.value]: e.target.value})}

现在事件重用不是问题.

旁注: [e.target.value]:e.target.value 这真的没有意义.您正在将具有新值名称的对象键设置为相同的值.

似乎您之前看过 [e.target.name]: e.target.value 并对其进行了修改.我建议使用名称，然后为 input 提供您要更新的属性的名称.

这是一个简化的例子:

const {useState, useEffect} = React;const 示例 = () =>{const [state, setState] = useState({ input1: '' });const onChange = (e) =>{setState({[e.target.name]: e.target.value});}返回 (<输入名称=输入1"placeholder="在此处输入余额"onChange={onChange}值={state.input1}/>);}ReactDOM.render(, document.getElementById('root'));

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

I am new and still practicing in reactjs. I am having a problem in my input form, whenever I type any key I always get TypeError: Cannot read property 'value' of null

this is my code:

import React, { useState } from 'react';

export default function FormPractice() {
const [isDefault, setIsDefault] = useState('');
const [balance, setBalance] = useState({amount: null});

return (
  <div className="input">
    <input placeholder="enter balance here" onChange={e => setBalance(form => ({...form, [e.target.value]: e.target.value}))} value={isDefault}/>
  </div>
)
}

Thanks for the help.

解决方案

React re-uses events. When you use a functional update, by the time the function is called, the event has already been wiped for reuse. To use the event within the functional update you would need to call e.persist() which will take that event out of the reuse pool and let it keep its values.

To keep it inline, it would look like this:

onChange={e => {e.persist(); setBalance(form => ({...form, [e.target.value]: e.target.value}))}}

Or to make it more readable, move it into its own function:

const onChange = (e) => {
  e.persist();
  setBalance(form => ({...form, [e.target.value]: e.target.value}));
}

However, the simplest available solution would be to not use the functional update at all. You are replacing state values, but you are not setting any values derived from the previous state. So it is safe to use a normal update:

onChange={e => setBalance({...balance, [e.target.value]: e.target.value})}

Now the event reuse is a non-issue.

Side note: [e.target.value]: e.target.value this doesn't really make sense. You're setting an object key with the name of the new value to the same value.

It seems like maybe you've seen [e.target.name]: e.target.value before and modified it. I would suggest using the name, and then giving the input the name of the property you want to update.

Here is a simplified example:

const {useState, useEffect} = React;

const Example = () => {
  const [state, setState] = useState({ input1: '' });
   
  const onChange = (e) => {
    setState({[e.target.name]: e.target.value});
  }
   
   return (
    <input 
      name="input1"
      placeholder="enter balance here" 
      onChange={onChange} 
      value={state.input1}
    />
  );
}

ReactDOM.render(<Example />, document.getElementById('root'));

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

这篇关于Reactjs - TypeError:无法读取 null 的属性“值"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！