Question

我想将状态值发送到另一个组件。他们在同一个目录下。基本上我想从“Conversation.js”到“Openconversation.js”得到“selectedvalue”。

一切都很好，但我只需要将该状态值 (selectedvalue) 发送到 Openconversation.js

./components/Conversation.js:

import React, {useState} from 'react'
import { ListGroup } from 'react-bootstrap'
import { useConversations } from '../contexts/ConversationsProvider';

export default function Conversations() {
  const { conversations, selectConversationIndex } = useConversations()
  **const [selectedvalue, setSelectedValue] = useState('')**
  
  return (
    <ListGroup variant="flush">
      {conversations.map((conversation, index) => (
        <ListGroup.Item
          key={index}
          action
          onClick={() => {selectConversationIndex(index) && setSelectedValue(conversation.recipients.map(r => r.name).join(', '))} }
          active={conversation.selected}
        >
          {conversation.recipients.map(r => r.name).join(', ')}
        </ListGroup.Item>
      ))}


    </ListGroup>


  )
}

./components/Openconversation.js:

    import React, { useState, useCallback, useEffect } from 'react'
    import { Form, InputGroup, Button } from 'react-bootstrap'
    import { useConversations } from '../contexts/ConversationsProvider';
    import Axios from 'axios';
    
    
    export default function OpenConversation() {
      const [text, setText] = useState('');
      const [curuser, setCurUser] = useState('');
      const [oldchats, setOldChats] = useState([]);
    
    
      const setRef = useCallback(node => {
        if (node) {
          node.scrollIntoView({ smooth: true })
        }
      }, [])
    
    
    
      useEffect(() => {
        Axios.get('http://localhost:3001/api/get').then((response) =>{
          setOldChats(response.data);
          
        })
      }, [])
    
    
      useEffect(()=>{
        
        fetch('http://localhost:8000/api/current_user/', {
          headers: {
            Authorization: `JWT ${localStorage.getItem('token')}`
          }
        })
          .then(res => res.json())
          .then(json => {
            setCurUser(json.id);
          });
      
    },[]) 
      const { sendMessage, selectedConversation } = useConversations()
    
      function handleSubmit(e) {
        e.preventDefault()
    
       
    
        sendMessage(
          selectedConversation.recipients.map(r => r.id),
          text,
          selectedConversation.recipients.map(r => {
            Axios.post("http://localhost:3001/api/insert", {
              content: text, 
              sender: curuser, 
              recipient: r.id,
            }).then(() => {
              alert("saved on MySQL Database!");
            });
            
          })
        )
    
        
        setText('')
      }
    
      return (
        <div className="d-flex flex-column flex-grow-1">
  
              {selectedConversation.messages.map((message, index) => {
                const lastMessage = selectedConversation.messages.length - 1 === index
                return (
    
    
                  <div>
                      {oldchats.map(val => {
   
#####  I NEED THAT SELECTEDVALUE DATA FROM CONVERSATION.JS ########

                        return (val.sender== curuser && val.recipient == selectedvalue) ? 
    
                        <h2>{val.content}</h2>
    
                        :
    
                        <div></div>
    
                        })} 
    
                  </div>
                )
              })}
            </div>
          </div>
          <Form onSubmit={handleSubmit}>
            <Form.Group className="m-2">
              <InputGroup>
                <Form.Control
                  as="textarea"
                  required
                  value={text}
                  onChange={e => setText(e.target.value)}
                />
                <InputGroup.Append>
                  <Button type="submit">Send</Button>
                </InputGroup.Append>
              </InputGroup>
            </Form.Group>
          </Form>
        </div>
      )
    }

Answer 1

在您的 Openconversation.js 文件中，您似乎没有从 react 导入 useContext 然后将其分配给以下内容：

const conversationProviderContext = useContext(ConversationsProvider);

还要确保您使用的是高于 <ConversationsProvider.Provider/> 组件的 <Openconversation/> 组件。

您可能应该参考文档：https://reactjs.org/docs/context.html

Answer 2

我正在尝试一些东西。但是没有用。

conversation.js 的差异

const ReferenceDataContext = createContext({ selectedvalue, setselectedvalue});


  const ReferenceDataContextProvider = ({ children }) => {
    return (
      <ReferenceDataContext.Provider value={{ selectedvalue, setselectedvalue}}>
        {children}
      </ReferenceDataContext.Provider>
    );
  };

与 opencoversation.js 的区别

const  selectedvalue= useContext(ReferenceDataContext);

{selectedvalue}

但是当 {selectedvalue} 时什么都没有

React 将状态值发送到另一个组件

2 个答案: