React中Fetch结果用于表单修改后无显示更新问题求助

问题原因 #

核心问题出在React的state更新机制：

• data是引用类型的对象，你在onChangeText里直接修改data.nom = val，然后把同一个对象传给onChangeData。React对比前后state时，发现对象引用没变化，就不会触发组件重渲染，所以页面显示无更新。
• prenom是值类型的字符串，每次更新都会传入新的字符串值，React能检测到变化，所以正常触发重渲染。
  另外，你的初始state语法错误：useState([name: ''])是无效写法，数组不能用键值对，应该改成对象useState({nom: ''})。

解决方法 #

方法一：生成新对象更新state（推荐，适配多字段表单）

修改nom输入框的onChangeText逻辑，先复制原对象属性，再修改目标字段，最后用新对象更新state：

<TextInput
  style={styles.input}
  value={data.nom}
  onChangeText={(val) => {
    // 复制原对象，生成新对象
    const updatedData = { ...data, nom: val };
    onChangeData(updatedData);
  }}
/>

同时修正初始state：

const [data, onChangeData] = useState({ nom: '' })

方法二：拆分state为单独字段（适合字段较少的表单）

如果表单字段不多，可以把data中的字段拆成独立state，和prenom统一处理：

function Judokas() {
  const [prenom, onChangePrenom] = useState("c'est moi");
  const [nom, setNom] = useState('');

  useEffect(() => {
    fetch('http://192.168.1.104:8080/judo/judoka/4427')
      .then((response) => response.json())
      .then((data) => {
        setNom(data.nom);
        // 若prenom也从接口获取，可在此设置 onChangePrenom(data.prenom)
      })
      .catch((err) => {
        console.log('Fetch Error : ' + err.message)
      })
  }, [])

  return (
    <div>
      <StyledDiv>
        <div>
          <span>nom: </span>
          <span>{nom} </span>
          <TextInput
            style={styles.input}
            value={nom}
            onChangeText={setNom}
          />
        </div>
        <div>
          <span>prenom: </span>
          <div>
            <TextInput style={styles.input} value={prenom} onChangeText={onChangePrenom} />
          </div>
        </div>
      </StyledDiv>
    </div>
  )
}

补充说明 #

React的state更新遵循不可变原则，对于对象、数组这类引用类型，永远不要直接修改原state，必须生成新的引用再更新，这样React才能检测到变化并触发重渲染。

内容的提问来源于stack exchange，提问作者Matthieu Vansteene