React中点击Article无法更新title状态变量的问题求解

核心问题原因 #

1. <article> 不属于表单控件（如input、select这类），它本身不支持原生value属性，你设置的value={filme.title}不会被浏览器识别为有效属性。
2. 点击事件的e.target指向的是实际被点击的子元素（比如<h3>或<img>），而非绑定事件的<article>，就算value属性有效，也拿不到预期的值。

最简单的修复方案 #

直接在点击事件里使用遍历到的filme.title，无需通过事件对象获取：

import api from '../../services/api';
import { useEffect, useState } from 'react';
import './home.css'

export default function Home(){
const [filmes, setFilmes] = useState([]);
const [title, setTitle] = useState('');

    useEffect(()=>{
        async function loadFilmes(){
            const response = await api.get('movie/now_playing?', {
                params:{
                    api_key:'myApiKey123456',
                    language: 'pt-BR',
                    page: 1,
                }
            })
            setFilmes(response.data.results);
        }
        loadFilmes();
    },[]);

    return(
        <div>
            <h1>teste → {title}</h1>
            <div className="slider">
                {filmes.map(filme=>{
                    // 直接传入filme.title，不用依赖事件对象
                    return(<article key={filme.id} onClick={()=>setTitle(filme.title)}>
                        <h3>{filme.title}</h3>
                        <img className='poster' src={`https://image.tmdb.org/t/p/original${filme.poster_path}`} alt={filme.title}/>
                    </article>)
                })}
            </div>
        </div>
    )
}

另一种方案：使用自定义数据属性 #

如果一定要通过元素属性传递值，可以使用HTML的data-*自定义属性，同时用e.currentTarget获取绑定事件的元素：

{filmes.map(filme=>{
    return(<article 
        key={filme.id} 
        data-title={filme.title} 
        onClick={e=>setTitle(e.currentTarget.dataset.title)}
    >
        <h3>{filme.title}</h3>
        <img className='poster' src={`https://image.tmdb.org/t/p/original${filme.poster_path}`} alt={filme.title}/>
    </article>)
})}

e.currentTarget始终指向绑定事件处理函数的元素（也就是<article>），而dataset.title可以读取到我们设置的data-title属性值。

内容的提问来源于stack exchange，提问作者Dário Souza