如何从可变状态更新图像源？

Question

基本上，我试图在每次单击按钮时在按钮内的暂停/播放图标之间更改图像源。我的问题不在于将状态传递给源，而是在更新状态时更改源。

const playButton = "/images/play-button.svg";
const pauseButton = "/images/pause-button.svg";

我有一个数据源，我们将调用data，它是一个包含音频文件的数组，我将它映射到一个包含音频对象、播放状态和按钮 URL 的并行数组，类似于：

const [audioArray, setAudioArray] = useState([]);
useEffect( () => {

var audioArrayHolder = [];
data.map( item => {
            var audioItem = new Audio(item.audioURL);
            audioArrayHolder.push({
                                   audio: audioItem,
                                   playState: false,
                                   button: playButton
                                 })
});
setAudioArray(audioArrayHolder);
}, [data]);

现在可以将其加载到一组组件中，每个组件都有一个处理其音频播放的按钮：

function handlePausePlay(someIndex) {
     var audioArrayCopy = audioArray;
     var audioArrayObj = audioArray(someIndex);

     if (audioArrayObj.playState) {
        audioArrayObj.audio.pause();
        audioArrayObj.playState = false;
        audioArrayObj.button = playButton;

 } else {
        audioArrayObj.audio.play();
        audioArrayObj.playState = true;
        audioArrayObj.button = pauseButton;
 }

     audioArrayCopy[someIndex] = audioArrayObj;
     setAudioArray(audioArrayCopy);
}

data.map( (item, index) => {

<div>
   <ExampleComponent songName={data.name} songArtists={data.artists}/>

   <button onClick={handlePausePlay(index)}>
      <img src={audioArray[index].button} alt="Pause/Play Button"/>
   </button>
</div>

});

这会通过一个功能性暂停/播放按钮很好地加载所有组件，该按钮根本不会改变图像。每次按下按钮时，handlePausePlay 会在该索引处更新audioArray 的状态，并成功更改audioArray[index].button 属性，但src 已经渲染，因此图像卡在playButton，默认。

我尝试将图像作为一个单独的组件并将src 作为道具传递，并通过按下按钮将索引保存到名为currentIndex 的状态常量中，并将其传递到源中（即<img src={audioArray[currentIndex].button} ... /> ) 以及介于两者之间的许多愚蠢的想法。

这应该是一个微不足道的问题，但老实说，我作为一个新手在 2 天的大部分时间里都感到困惑。任何帮助表示赞赏。

Answer 1

我有一个可行的解决方案

创建新的状态加载

const [loading, setLoading] = useState(false);

然后在 handlePausePlay 中设置 Loading 为 true 像这样：

function handlePausePlay(someIndex) {
selLoading(true)
     var audioArrayCopy = audioArray;
     var audioArrayObj = audioArray(someIndex);

 if (audioArrayObj.playState) {
    audioArrayObj.audio.pause();
    audioArrayObj.playState = false;
    audioArrayObj.button = playButton;

 } else {
        audioArrayObj.audio.play();
        audioArrayObj.playState = true;
        audioArrayObj.button = pauseButton;
 }
     audioArrayCopy[someIndex] = audioArrayObj;
     setAudioArray(audioArrayCopy);

setTimeout(()=>setLoading(false),1000)
    }

然后使用 img 标签执行此操作：

<div>


 <ExampleComponent songName={data.name} songArtists={data.artists}/>

   <button onClick={handlePausePlay(index)}>
      !loading && <img src={audioArray[index].button} alt="Pause/Play Button"/>
   </button>
</div>

Answer 2

好的，让我们看看。

我发现了一些我们需要注意的事情。

首先：

var audioArrayObj = audioArray(someIndex);

audioArray 不是函数是数组，因此要访问您需要的值，您必须使用 []

var audioArrayObj = audioArray[someIndex];

其次，我建议只使用一个数组来显示您的数据，而不是像您在return 那样混合使用两个数组。

data.map( (item, index) => {

<div>
   <ExampleComponent songName={data.name} songArtists={data.artists}/>

   <button onClick={handlePausePlay(index)}>
      <img src={audioArray[index].button} alt="Pause/Play Button"/>
   </button>
</div>

});

在这段代码中，我发现您的 onClick 函数不是箭头函数...这将导致在渲染时执行。因此，它不会像您预期的那样工作。

onClick={handlePausePlay(index)}

正确使用方法：

onClick={()=>handlePausePlay(index)}

最后，我用工作代码创建了一个 sn-p。 只有一个数组来显示数据，我将audioArray 与data 值混合在一起，并将其混合在useEffect 上。 我使用 span 来模拟图像，并将 altButton 文本添加为​​每个对象的变量。 我删除 new Audio 代码只是为了使代码 sn-p 正常工作。 而在handlePausePlay函数的最后，我使用spread operator让useState意识到它有一个新的值。

setAudioArray([...audioArrayCopy]);

代码sn-p：

// Get a hook function
const {useState, useEffect} = React;
const playButton = "/images/play-button.svg";
const pauseButton = "/images/pause-button.svg";

const Example = () => {

  const [audioArray, setAudioArray] = useState([{
     playState: false,
     altText: "Play Button",
     button: playButton
  },{
     playState: false,
     altText: "Play Button",
     button: playButton
  },{
     playState: false,
     altText: "Play Button",
     button: playButton
  }
  ]);
  const [data, setData] = useState([{
    name: "Song1", 
    artist: "Artist1"
  },{
    name: "Song2", 
    artist: "Artist2"
  },{
    name: "Song3", 
    artist: "Artist3"
  }]);
  
    useEffect( () => {
      var audioArrayHolder = [];
      data.map( item => {
        audioArrayHolder.push({
                               name: item.name, 
                               artist: item.artist,
                               playState: false,
                               altText: "Play Button",
                               button: playButton
                             })
      });
      setAudioArray(audioArrayHolder);
    }, [data]);
  
  
  const handlePausePlay = (someIndex) => {
       var audioArrayCopy = audioArray;
       var audioArrayObj = audioArray[someIndex];

       if (audioArrayObj.playState) {
          audioArrayObj.playState = false;
          audioArrayObj.altText = "Play Button",
          audioArrayObj.button = playButton;
     } else {
            audioArrayObj.playState = true;
            audioArrayObj.altText = "Pause Button",
            audioArrayObj.button = pauseButton;
     }

       audioArrayCopy[someIndex] = audioArrayObj;
       setAudioArray([...audioArrayCopy]);
  }

  return (
    <div>
      {audioArray.map( (item, index) => {
      return <div>
         <span> Playing {item.name} - ({item.artist}) </span>

         <button onClick={()=>handlePausePlay(index)}>
            {/*<img src={item.button} alt="Pause/Play Button"/>*/}
            <span> src={item.button} alt={item.altText}</span>
         </button>
      </div>
      })}
    </div>
  );
};




// Render it
ReactDOM.render(
  <Example title="Example using Hooks:" />,
  document.getElementById("react")
);

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